CSS图片被拉伸到100%高度

Question

无论我做什么，CSS都会拉伸图像，但我不知道图像为什么很小，但它却使其高度变得巨大。我正在使用：

<?PHP the_post_thumbnail( 'full' );  ?>

以下是使用的CSS，但您会发现它导致我的图片被拉伸而不是正确大小。

.services-icon img {
    max-width: 100%;
    display: block;
    width: 200px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;

这里是网址

http://www.lockmsiths.solitudesoftware.co.uk/#site

（注：该内容已经是中文，无需翻译）

- c-sharp-and-swiftui-devni

Answer 1

您的<img>标签拥有由WordPress设置的width和height属性。

<img width="1000" height="500" ... >

在您的CSS中，您可以设置自动高度来保持纵横比，根据您的200px宽度：

.services-icon img {
    height: auto;
}

请记住，您的CSS会覆盖这个图像的WordPress设置。

- andreas

Answer 2

如果您希望图像在容器中使用100％的宽度，请在CSS中删除width：200px。 img标签具有宽度和高度属性，请将其删除。如果您无法控制这些内联属性，则可以使用JavaScript并将其删除。

在这种情况下，不需要使用height：auto，因为浏览器样式会应用该样式。但我建议您使用它。

- Mario Junior Torres Perez

Answer 3

您可以在 CSS 中使用 height: auto; 强制设置高度自动适应。更好的方法是在 WordPress 中更改实际图像高度，以便图像上的width和height属性正确（就像 @andreas 提到的那样）。

- tech4him