图像css最大宽度不失真

【问题标题】：Image css max width without distort图像css最大宽度不失真
【发布时间】：2013-11-19 11:40:16
【问题描述】：

Goody，想知道如何在不扭曲高度的情况下拉伸图像以适应宽度？也许只显示图像的中心部分？这是网站：

以及css的部分：

.featured-image, .featured-img{ top: 0; width: 100%; height: 537px; left: 0;}

谢谢！

【问题讨论】：

标签： image css

【解决方案1】：

height: auto; 而不是实际图像上的height: 537px。

如果你不希望它变得那么大，你可以在 div 上设置高度并设置 `overflow: hidden;'

【讨论】：

非常感谢！它做了修复。想知道如何显示图像的中间部分？它不适用于垂直对齐，谢谢！
给图片添加一个否定的margin-top。您可能需要使用媒体查询来获取不同宽度的图像。如果您不希望图像大于实际宽度，也可以在图像上使用width: auto; max-width: 100%。