html - CSS 图像被拉伸(stretch)到 100% 高度

Question

无论我在做什么，我都有 css，它会拉伸(stretch)图像，但我看不到图像有多小，但它使我正在使用的高度很大

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

使用的 css 如下，但正如您将看到的那样，它导致了 我的图像拉伸(stretch)并且尺寸不正确。

.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

Answer 1

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

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

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

.services-icon img {
    height: auto;
}

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