css实现等比宽高

CSS中实现等比宽高的功能是很常见的需求。例如，在一个响应式网站中，我们经常需要保证图片在不同设备上的显示宽度和高度比例不变，以免图片变形。下面我们来介绍两种方法实现CSS等比宽高。

方法一：img {width: 100%;height: auto;}

这个方法的原理是将图片的宽度设置为100%，高度自动适应。这样就能保证图片在原有比例下缩放。这种方法的优点是简单易用，代码量少，但缺点是只能在图片外层为块级元素时生效。

方法二：.container {position: relative;}.container img {position: absolute;width: 100%;height: 100%;}

这个方法的原理是先设置一个包裹图片的容器为相对定位，再将图片设置为绝对定位，宽高均为100%，这样就能保证图片等比例缩放并居中显示。这种方法的优点是能够适用于各种布局下，但缺点是需要额外的包裹元素。

上一篇：css实现表格文本居中

下一篇：css实现轮播图菜鸟