图片百分比宽度随屏幕宽度自适应为正方形

╰+哭是因爲堅強的太久メ 2022-12-27 08:39 213阅读 0赞

//html代码
                    <div class="module_comment_imgs">
                            <div class="module_comment_imgs_wrap">
                                    <div class="module_comment_imgs_img">
                                            <img src="/mat/src/images/index/zc_1.jpg">
                                    </div>
                                    <div class="module_comment_imgs_img">
                                            <img src="/mat/src/images/index/zc_1.jpg">
                                    </div>
                                    <div class="module_comment_imgs_img">
                                            <img src="/mat/src/images/index/zc_1.jpg">
                                    </div>
                                    <div class="module_comment_imgs_img">
                                            <img src="/mat/src/images/index/zc_1.jpg">
                                    </div>
                                    <div class="module_comment_imgs_img">
                                            <img src="/mat/src/images/index/zc_1.jpg">
                                    </div>
                                    <label class="module_comment_imgs_img" style="background: #f6f7fb;" for="file">
                                            <span class="submit_file"><i class="iconfont icon-jia"></i></span>
                                    </label>
                                    <input type="file" id="file">
                            </div>
                    </div>
    //css代码：
    .module_comment_imgs{ overflow:hidden;}
    .module_comment_imgs .module_comment_imgs_wrap{ margin:0 -.05rem;}
    .module_comment_imgs .module_comment_imgs_img{  float:left;position:relative;display:block;width:calc(25% - .1rem);padding-bottom:calc(25% - .1rem);margin:0.05rem .05rem;}
    .module_comment_imgs .module_comment_imgs_img img{ position:absolute;display:inline-block;top:0;left:0;width:100%;height:100%;}
    .module_comment_imgs .module_comment_imgs_img span{ position:absolute;display:flex; align-items: center; justify-content: center; top:50%;transform: translateY(-50%);  left:0; right:0; text-align: center; margin:0 auto; width:0.6rem;height:0.6rem;background: linear-gradient(to right bottom,#f45b30,#fa832e); border-radius: 50%; }
    .module_comment_imgs .module_comment_imgs_img i{ color:#fff;}
    .module_comment_imgs .module_comment_imgs_wrap input{ width:0;height:0;}

效果图：  
![在这里插入图片描述][2020120916265867.png]  
屏幕放大：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70]

[2020120916265867.png]: /images/20221120/f0546c3c4d4841e6973053fc71e03bd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAzMzA0OA_size_16_color_FFFFFF_t_70]: /images/20221120/e8936e8372f4461883f5fbae13d67c63.png