后排版式自适应调整图片大小(js)

最新推荐文章于 2019-09-06 12:12:33 发布

qidizi

最新推荐文章于 2019-09-06 12:12:33 发布

阅读量794

点赞数

分类专栏： js html 文章标签： html js img 自适应

本文链接：https://blog.youkuaiyun.com/qidizi/article/details/8729889

版权

js 同时被 2 个专栏收录

89 篇文章

订阅专栏

html

12 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现的图片自适应调整方案。该方案允许图片在不支持预加载的情况下，先显示默认尺寸，待加载完成后再根据实际宽高比进行调整，确保了较好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<style>
div{width:200px;height:200px;overflow:hidden;border:1px solid red;background:gray;padding:5px;text-align:center;}
img{padding:5px;border:1px solid white;background:gray;}
</style>
</head>
<body>

<script>
function imgResize(img){
   var w = img.width;
   var h = img.height;

   if (img.getAttribute('height', 2) && (w > h) ) {//2for ie
       img.removeAttribute('height');
       img.setAttribute('width', h);
   } else if (img.getAttribute('width', 2) && (h > w) ) {
       img.removeAttribute('width');
       img.setAttribute('height', w);
   }
}
</script>
<div>
   <img src="h.png" width="200" οnlοad="imgResize(this);" />
</div>
<div>
   <img src="w.png" width="200" οnlοad="imgResize(this);" />
</div>
<div>
   <img src="w.png" width="200" οnlοad="imgResize(this);" />
</div>
<div>
   <img src="w.png" width="200" οnlοad="imgResize(this);" />
</div>
</body>
</html>

因为业务流程并不支持先获取图片再显示,而是先显示再调整,所以,逻辑是:先显示,某边越过时,隐藏,加载完成后js进行调适.体验效果比无调适稍好.