css 图片 按比例 显示图片

在网页上，图片是我们设计中非常重要的组成部分。但是，有时候我们需要保持图片的长宽比例，否则图片会变形。在这种情况下，我们可以使用CSS来按比例显示图片。

/* HTML代码 */
<img src="image.jpg" alt="美丽的风景">

/* CSS代码 */
img {
    max-width: 100%;
    height: auto;
}

这段CSS代码中，我们使用了两个属性来按比例显示图片。

max-width：此属性使图片的宽度不会超过其容器的宽度。这是一个重要的属性，因为如果图片的尺寸大于其容器的尺寸，图片将无法按比例显示。

height：此属性使图片的高度根据其宽度自动调整。这确保了图片保持其长宽比例，不会变形。

在这个例子中，我们并没有指定图片的宽度。因为我们已经设置了max-width属性，图片的宽度将根据其容器的宽度自动调整，以保持其长宽比例。

总体而言，该方法是相当简单的，同时也非常有效。只需几行CSS代码，您就可以轻松地实现按比例显示图片的效果。因此，如果你想在你的网页中保持图片的长宽比例，使用此方法是非常明智的选择。