css 图像被拉伸到 100% 高度

Posted 2023-03-05

【中文标题】css 图像被拉伸到 100% 高度

【英文标题】：css image being stretched to 100% height

【发布时间】：2018-05-30 00:25:21

【问题描述】：

无论我在做什么，我都有 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

【参考方案1】：

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

<img   ... >

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

.services-icon img 
    height: auto;

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

【参考方案2】：

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

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

【参考方案3】：

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