jquery 图片的尺寸来判断图片是横图还是竖图，判断过后给予不同的展示方式

最新推荐文章于 2021-11-25 17:12:14 发布

anran_1211

最新推荐文章于 2021-11-25 17:12:14 发布

阅读量4.1k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/anran_1211/article/details/79054481

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style:none;
            margin: 0;
            padding: 0;
        }
        ul li {
            width: 100px;
            height: 100px;
            position: relative;
            float: left;
            border: 1px solid #000;
            overflow: hidden;
        }
        ul li img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <ul>
        <li><img src="img/2.jpg"/></li>
        <li><img src="img/6.jpg"/></li>
        <li><img src="img/3.jpg"/></li>
        <li><img src="img/2.jpg"/></li>
        <li><img src="img/1.jpg"/></li>
    </ul>
    <script src="jquery-3.1.1.js"></script>
    <script>
        ImgLimit($('img'));     
        function ImgLimit(obj){      // 封装函数
            obj.each(function () {
                if($(this).height() > $(this).width()) {
                    $(this).height('90%');	
                }else {
                    $(this).width('90%');
                }
            })
        }

    </script>
</body>
</html>

anran_1211

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery 图片的尺寸来判断图片是横图还是竖图，判断过后给予不同的展示方式

Title * { margin: 0; padding: 0; } ul { list-style:none; margin: 0; padding: 0; } ul li {
复制链接

扫一扫

专栏目录