图片按宽高比1:1响应，窗口大小如何变化，图片宽高始终相等

Posted 2020-11-30 littleboyck

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片按宽高比1:1响应，窗口大小如何变化，图片宽高始终相等相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <!--user-scalable=no禁止缩放-->
        <title></title>
        <!--[if lt IE 9]>
          <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body,html{
                background: #f2f2f2;
            }
            .full-container{
                padding: 15px;
            }
            .panel-card{
                height: 400px;
                background: #FFFFFF;
            }
            .clearfix:after{
                clear: both;
            }
            .clearfix:after,.clearfix:before{
                display: table;
                content: ‘‘;
            }
            .layui-row:after,.layui-row:before {
                content: ‘‘;
                display: block;
                clear: both
            }
            .img-responsive{
                display: block;
                width: 100%;
                height: 100%；
　　　　　　　}

            .img-item{
                float: left;
                box-sizing: border-box;
                display: none;
            }
            .pad15>*{
                padding: 7.5px;
            }
            .img-info{
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="full-container">
            <div class="panel-card">
                <div class="img-list clearfix pad15">
                    <div class="img-item">
                        <div class="img-info">
                            <img src="img/natural1.jpg" class="img-responsive"/>
                        </div>
                    </div>
                    <div class="img-item">
                        <div class="img-info">
                            <img src="img/natural1.jpg" class="img-responsive"/>
                        </div>
                    </div>
                    <div class="img-item">
                        <div class="img-info">
                            <img src="img/natural1.jpg" class="img-responsive"/>
                        </div>
                    </div>
                    <div class="img-item">
                        <div class="img-info">
                            <img src="img/natural1.jpg" class="img-responsive"/>
                        </div>
                    </div>
                    <div class="img-item">
                        <div class="img-info">
                            <img src="img/natural1.jpg" class="img-responsive"/>
                        </div>
                    </div>
                    <div class="img-item">
                        <div class="img-info">
                            <img src="img/natural1.jpg" class="img-responsive"/>
                        </div>
                    </div>
                </div>
                <div class="img-list clearfix pad15">
                    <div class="img-item">
                        <div class="img-info">
                            <img src="img/natural1.jpg" class="img-responsive"/>
                        </div>
                    </div>
                    <div class="img-item">
                        <div class="img-info">
                            <img src="img/natural1.jpg" class="img-responsive"/>
                        </div>
                    </div>
                    <div class="img-item">
                        <div class="img-info">
                            <img src="img/natural1.jpg" class="img-responsive"/>
                        </div>
                    </div>
                    <div class="img-item">
                        <div class="img-info">
                            <img src="img/natural1.jpg" class="img-responsive"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
        <script>
            
            /**
             * 监听窗口大小变化事件
             */
            var winResize = function (callback) {
                $(window).on(‘resize‘,function () {
                    callback();
                });
            };
            winResize(function(){
                var imgListWidth = $(".img-list").width()
                var size = 6;//一行图片数
                $(".img-item").css({"width":parseInt(imgListWidth/size)+"px","height":parseInt(imgListWidth/size)+"px"})
                if(!$(".img-item").is(":visible")){
                    $(".img-item").show();
                }
            })
            
            window.onload = function(){
                 var myEvent = new Event(‘resize‘);
                window.dispatchEvent(myEvent);
            }
        </script>
    </body>
</html>

以上是关于图片按宽高比1:1响应，窗口大小如何变化，图片宽高始终相等的主要内容，如果未能解决你的问题，请参考以下文章

CSS3新增功能02

图片宽高自适应，居中裁剪不失真

css体验优化之图片容器设置宽高比

CSS定位图片位置问题？？图片到底如何定位，我的图片位置随着网页窗口的大小改变位置

微信小程序------媒体组件（视频，音乐，图片）

background-size： contain 与cover的区别，以及ie78的兼容写法