html - 在 CSS 中设置图像宽度，但具有宽度的高度比例

Question

我想知道是否有一种方法可以在 css 中设置图像宽度，但该图像具有高度比例，这样它就不会失真。我有一个主要图像，我需要宽度为 720 像素，但高度无关紧要我只想缩放高度，使其与宽度成比例，这样它看起来就不会被拉伸(stretch)。

.lead-image img{
 width: 720px;
 }

当我这样做时，宽度只是拉伸(stretch)到 720 像素，但高度保持不变，而不是缩放。

编辑:我想通了，当我将高度设置为 100% 时，它起作用了。谢谢

Answer 1

您可能希望将包装 .lead 图像设置为特定的宽度和高度，然后像上面那样将 img 样式设置为:

.lead-image {
    width: 720px;
    height: 300px;
}

.lead-image img {
   width: 100%;
   height: auto;
}

不幸的是，在没有至少具有固定高度的包装容器的情况下，按比例调整图像大小在这方面是一个痛苦。