由于html加载最后才会加载图片,所以如果没有提前设置高度的话,就会出现窗口抖动,用户体验很不好.
如果固定死高度的话，又不能于宽等比例缩放。
解决办法:
已知原图的宽高比例
例如:此图宽500,高321,高/宽为64.2%
方法一:
不考虑兼容性(即手机端开发):
直接设置height: 64.2vw;,意思是高度设置为视窗宽度的64.2%
<style> .img-content{ width: 100%; height: 64.2vw; overflow: hidden; } img{ width: 100%; } </style> </head> <body> <div class="img-content"> <img src="./hai.jpg" alt=""> </div> <div>text</div> </body>
方法二
.img-content{ 100%; height: 0; overflow: hidden; padding-bottom: 64.2%; } img{ 100%; } </style> </head> <body> <div class="img-content"> <img src="./hai.jpg" alt=""> </div> <div>text</div> </body>
由于padding的大小是根据父级元素的宽来规定大小，所以上面设置padding-bottom为64.5%是相对于整个body宽度（100%），又因为默认box-sizing为content-box，所以宽高是元素本身的宽高，设置了高度为零，高度就由padding-bottom撑开。
题外：
由第二种方法可以联想到我们要做一个正方形，要怎么实现
30%;padding-top: 30%;height: 0;
width的比例等于padding-top的比例即可