css等比例放大图片 |css 命名规范

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

上述代码可以让图片完美的适应父元素的大小，同时又不会失真，因为它会根据图片的原始宽高比来自动调整大小。

比如在响应式布局中，大家可以使用这个技巧来让图片自适应不同的设备上。假设大家有一张宽度为600px，高度为400px的图片，大家希望在手机端和平板端上展示时，图片大小能够正确适应屏幕大小。大家可以将图片的父元素设置为宽度为100%的容器，并使用上述代码来实现等比例放大图片的效果。

<div class="image-container">
<img src="image.jpg" alt="">
</div>
.image-container {
width: 100%;
}
img {
width: 100%;
height: auto;
max-width: 100%;
max-height: 100%;
}

当大家在手机端浏览器中查看这个页面时，图片会自动缩小到屏幕宽度大小。当大家在平板端浏览器中查看这个页面时，图片会自动放大到容器的宽度。

除了上述代码外，大家也可以使用CSS3的transform属性来进行等比例放大图片。如下所示：

img {
transform: scale(1);
transform-origin: top left;
}

这种方法可以使用CSS3动画以及更加细致的控制方式。但是需要注意的是，由于transform属性是进行矩阵运算来实现放大效果的，所以会占用更多的计算资源，对于低端设备来说可能会有性能问题。