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

Question

我想知道是否有办法在css中设置图像宽度，但是具有该图像的高度比例，以便它不会失真。我有一个铅图像，我需要宽度为720像素，但高度并不重要我只想缩放高度，使其与宽度成正比，使其看起来不会拉伸。

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

当我这样做时，宽度只会拉伸到720px，但高度保持不变，而不是缩放。

编辑：当我将高度设置为100％而不是它的工作时，我想通了。感谢

Answer 1

通过将高度设置为100％也比缩放高度。感谢

Answer 2

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

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

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

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

Answer 3

通过将高度设置为自动图像宽度和高度比例

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