版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xingxingleo/article/details/50994521
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>