html关于div控制比例，及控制图片显示形状

html由于要面对屏幕尺寸的适配问题，我们经常通过百分比来设置宽度，但是问题来了，高度不能根据屏幕的百分比来设置啊！

解决方法： <div style="width:100%;position:relative;padding-bottom:56.25%; height: 0;">

这个56.25%就是div的高与宽的比例。

有些时候，图片的比例是不固定的，而我们要显示的大小是固定的，怎么办呢？

先通过div来确定形状，然后通过overflow:hidden;属性来去掉图片多余的部分。

<div style="width:100%;position:relative;padding-bottom:56.25%; height: 0;overflow:hidden;">

<img style="width=100%"/>

</div>