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

最新推荐文章于 2024-07-08 15:05:28 发布

qidizi

最新推荐文章于 2024-07-08 15:05:28 发布

阅读量771

点赞数

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

本文链接：https://blog.csdn.net/qidizi/article/details/8729889

版权

js 同时被 2 个专栏收录

89 篇文章 0 订阅

订阅专栏

html

12 篇文章 0 订阅

订阅专栏

<!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进行调适.体验效果比无调适稍好.

qidizi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
后排版式自适应调整图片大小(js)

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;}function imgResiz
复制链接

扫一扫