Question

当我尝试保持图像宽高比时遇到问题

我有一个带有height: auto; max-width: 640px的容器，在该容器中，我想每行显示4张图像，长宽比为1：1（正方形）

窗口/容器的宽度小于640（小屏幕设备）时，所有图像变高

是否可以仅通过CSS解决此问题？

我将示例代码放在下面

预先感谢

<html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style type="text/css">
                #container {
                    border: 1px solid red;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    height: auto;
                    margin: 14px auto;
                    max-width: 640px;
                    width: 100%;
                }

                    #container .child {
                        height: 160px;
                        overflow: hidden;
                        width: 25%; /* 100%/4, only 4 image in each row */
                    }

                        .child img {
                            height: 100%;
                            object-fit: cover;
                            width: 100%;
                        }
            </style>
        </head>
        <body>
            <div id="container">
                <div class="child"> <!-- Image #1 -->
                     <img src="https://s3.amazonaws.com/cdn0.dutchbulbs.com/images/500/60190.jpg">
                </div>
                <div class="child"> <!-- Image #2 -->
                     <img src="https://previews.123rf.com/images/dreamcreation01/dreamcreation011805/dreamcreation01180503640/102424777-it-s-spring-time-banner-with-round-frame-and-flowers-on-blue-sky-background.jpg">
                </div>
                <div class="child"> <!-- Image #3 -->
                     <img src="https://i.pinimg.com/originals/11/2b/74/112b746a2182417b2a947d949798c968.jpg">
                </div>
                <div class="child"> <!-- Image #4 -->
                     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT_t3dcCgs9yN7QliI29w0acibdSgVzV9obJw&usqp=CAU">
                </div>
                <div class="child"> <!-- Image #5 -->
                     <img src="https://images-na.ssl-images-amazon.com/images/I/41MrYM42sIL.jpg">
                </div>
                <div class="child"> <!-- Image #6 -->
                     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSyhn20sg2ZKvx47Gl_1L7sww2W3df_RvjCBA&usqp=CAU">
                </div>
                <div class="child"> <!-- Image #7 -->
                     <img src="https://images.unsplash.com/photo-1464982326199-86f32f81b211?ixlib=rb-1.2.1&w=1000&q=80">
                </div>
                <div class="child"> <!-- Image #8 -->
                     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcStidi_9IZSp3q2dSqbIOodAd8ib1K3xWMv9g&usqp=CAU">
                </div>
            </div>
        </body>
    </html>

Answer 1

您可以添加媒体查询和最大高度。

@media (max-width: 640px) {
  #container .child {
    max-height: calc((100vw - 16px) / 4);
  }
}

请注意，相减16像素是为了补偿<body>元素在Chrome和Firefox中的默认左/右页边距，即每边8像素。如果您对边距设置不同，则可以将16px调整为左右边距的总和。

<html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style type="text/css">
                #container {
                    border: 1px solid red;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    height: auto;
                    margin: 14px auto;
                    max-width: 640px;
                    width: 100%;
                }

                    #container .child {
                        height: 160px;
                        overflow: hidden;
                        width: 25%; /* 100%/4, only 4 image in each row */
                    }

                        .child img {
                            height: 100%;
                            object-fit: cover;
                            width: 100%;
                        }
                        
                    @media (max-width: 640px) {
                      #container .child {
                        max-height: calc((100vw - 16px) / 4);
                      }
                    }
            </style>
        </head>
        <body>
            <div id="container">
                <div class="child"> <!-- Image #1 -->
                     <img src="https://s3.amazonaws.com/cdn0.dutchbulbs.com/images/500/60190.jpg">
                </div>
                <div class="child"> <!-- Image #2 -->
                     <img src="https://previews.123rf.com/images/dreamcreation01/dreamcreation011805/dreamcreation01180503640/102424777-it-s-spring-time-banner-with-round-frame-and-flowers-on-blue-sky-background.jpg">
                </div>
                <div class="child"> <!-- Image #3 -->
                     <img src="https://i.pinimg.com/originals/11/2b/74/112b746a2182417b2a947d949798c968.jpg">
                </div>
                <div class="child"> <!-- Image #4 -->
                     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT_t3dcCgs9yN7QliI29w0acibdSgVzV9obJw&usqp=CAU">
                </div>
                <div class="child"> <!-- Image #5 -->
                     <img src="https://images-na.ssl-images-amazon.com/images/I/41MrYM42sIL.jpg">
                </div>
                <div class="child"> <!-- Image #6 -->
                     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSyhn20sg2ZKvx47Gl_1L7sww2W3df_RvjCBA&usqp=CAU">
                </div>
                <div class="child"> <!-- Image #7 -->
                     <img src="https://images.unsplash.com/photo-1464982326199-86f32f81b211?ixlib=rb-1.2.1&w=1000&q=80">
                </div>
                <div class="child"> <!-- Image #8 -->
                     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcStidi_9IZSp3q2dSqbIOodAd8ib1K3xWMv9g&usqp=CAU">
                </div>
            </div>
        </body>
    </html>

保持图像高宽比（正方形），容器高度为自动

1 个答案: