html图片自动适应宽度,css 让图片按自身比例适应元素宽度-移动端

如果一张图片的比例是 4比1 ，在不设置固定宽高的时候，如何实现？

页面结构

class="swiper-img"

src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20199/3ff47fa622d07edad492c2859a5ad32f.jpg_750x200_3df30168.jpg"

alt="去哪儿门票"

>

图片宽高是750*200，比例是 1/0.2667

整个图片是这样的

如果什么也不设置页面显示是这样的

下面设置css样式

// 先设置包裹div的元素大小

.wrapper {

overflow: hidden;

width: 100%;

height: 0;

padding-bottom: 26.67%;

}

// 然后设置img宽度 100%即可

.swiper-img {

width: 100%;

}

注：

1. padding-bottom 设置的是高度，它的百分比是依据 wrapper的父元素宽度设置的，

比如：父元素宽度是窗口的 70%，那么 padding-bottom 的百分比就是窗口宽度

的 70% 的 26.67% 。

设置css完成后页面就ok了 ,为了演示padding-bottom是以父元素的宽度进行设置，我将父元素设置 width:70%