图片加载防止窗口抖动，又可以等比例缩放

最新推荐文章于 2023-02-08 10:51:10 发布

weixin_30414635

最新推荐文章于 2023-02-08 10:51:10 发布

阅读量216

点赞数

原文链接：http://www.cnblogs.com/echo-hui/p/9427396.html

版权

由于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{
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撑开。

题外：

由第二种方法可以联想到我们要做一个正方形，要怎么实现

width: 30%;padding-top: 30%;height: 0;

width的比例等于padding-top的比例即可

转载于:https://www.cnblogs.com/echo-hui/p/9427396.html

weixin_30414635

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片加载防止窗口抖动，又可以等比例缩放

由于html加载最后才会加载图片,所以如果没有提前设置高度的话,就会出现窗口抖动,用户体验很不好.如果固定死高度的话，又不能于宽等比例缩放。解决办法:已知原图的宽高比例例如:此图宽500,高321,高/宽为64.2%方法一:不考虑兼容性(即手机端开发):直接设置height: 64.2vw;,意思是高度设置为视窗宽度的64.2%<style&...
复制链接

扫一扫