该怎么实现CSS实现图片等比例放大缩小？适应移动端和web端

Question

图片比例都是固定的，不要有任何剪裁或者区域缺失
不要用背景图

Answer 1

可以使用padding自适应图片布局，适用于内联的<img>，首先图片元素外面需要加一个固定比例的容器元素，如：

<div class="banner">
<img src=""banner.jpg>
</div>

.banner元素同样负责控制比例，然后图片填充.banner元素即可，CSS代码：

.banner {
padding: 15.15% 0 0;
position: relative;
}
.banner > img {
position: absolute;
width: 100%; height: 100%;
left: 0; top: 0;
}