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

Posted echo-hui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片加载防止窗口抖动,又可以等比例缩放相关的知识,希望对你有一定的参考价值。

由于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的比例即可
 
 

以上是关于图片加载防止窗口抖动,又可以等比例缩放的主要内容,如果未能解决你的问题,请参考以下文章

PHP学习笔记:等比例缩放图片

php等比例缩放图片及剪切图片代码

js 图片的等比例缩放判断

一个ImageView等比例缩放

等比例缩放图片

js或css怎么图片随屏幕分辨率等比例缩放