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;

Url 在这里

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

Answer 1

您的 <img> 标签有一个 width 和一个由 Wordpress 设置的 height 属性。

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

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

.services-icon img {
    height: auto;
}

请记住，您的 CSS 会覆盖此图片的 Wordpress 设置。

Answer 2

如果您希望图像在容器中使用 100% 宽度，请删除 css 中的宽度：200px。标签有宽高属性，去掉。如果您无法控制这些内联属性，您可以使用 javascript 并将其删除。

在这种情况下不需要使用 height: auto ，因为浏览器样式应用该样式。但是我推荐你使用它。

Answer 3

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

css 图片被拉伸到 100% 高度

css image being stretched to 100% height

html

css

wordpress

image

image-size