标签：tom pre back XML 提前 jpg bottom 手机 缩放
<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{ width: 100%; height: 0; overflow: hidden; padding-bottom: 64.2%; } img{ width: 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撑开。
题外：
由第二种方法可以联想到我们要做一个正方形，要怎么实现
标签：tom pre back XML 提前 jpg bottom 手机 缩放
原文地址：https://www.cnblogs.com/echo-hui/p/9427396.html
