css 图片 等比例缩放

CSS中的图片等比例缩放是网页设计中常用的技巧之一，因为这样可以让图片在不改变其宽高比的情况下适应不同的屏幕尺寸。以下是实现图片等比例缩放的方法：

img {
    max-width: 100%;
    height: auto;
}

上面的代码意味着当图片的宽度超过其所在容器的宽度时，该图片的宽度将自动缩小至容器的宽度，而高度将按比例自动缩小以保证图片的原始宽高比例不变。当然，这只适用于图片的宽度超过容器宽度的情况。如果图片高度超过容器高度，则需要添加一个容器来包裹该图片，并将该容器的高度设置为所需的值。

除了上述方法，还有其他一些方法可以实现图片等比例缩放。例如，使用background-image属性来设置图片背景：

div {
    background-image: url("image.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

上面的代码意味着在网页上添加一个div容器，该容器将显示背景图片，并将背景图片自动缩放以适应该容器的大小。background-size属性的值可选contain或cover，contain表示图片将自动缩小以适应容器，而cover表示图片将自动放大以完全覆盖容器。另外，background-position属性可用于控制图片在容器中的位置。

综上所述，图片等比例缩放是网页设计中重要的技巧之一，它可以让图片在不同的屏幕尺寸下自适应并保持其原始宽高比例。无论是使用img标签还是使用background-image属性，只需简单地几行CSS代码就可以实现图片等比例缩放。