Maintain image aspect ratio (square) with container height is AUTO

Question

I have a problem when I tried to maintain images aspect ratio

I have a container with height: auto; max-width: 640px, inside this container, I want to display 4 images in each row, with aspect ratio 1:1 (square)

The problem occurs when the window's / container's width is less than 640 (small screen device), all images become tall

Is this problem can be solved by CSS only?

I will put the sample code below

Thanks in advance

<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>

EvanMorrison · Answer 1 · 2020-07-24T04:40:02.563

You can add a media query and max-height.

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

Note that subtracting 16px is done to compensate for the default left/right margin in Chrome and Firefox on the <body> element, which is 8px each side. If you set the margin differently then you would adjust that 16px to whatever the total of left and right margin is.

<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>

Hello EvanMorrison, thank you for your answer, but when I try to resize the window screen to 320px, the images still disorted, 76.5px x 80px, is this realy can be solve with CSS only? — Gwein, Jul 24 '20 at 04:35
@Gwein I updated my answer. Originally i didn't account for the left/right margin, but the updated answer shows you how to do that. And yes, CSS only. — EvanMorrison, Jul 24 '20 at 04:43
Hello EvanMorrison, I have found the solution for this problem of mine — Gwein, Jul 25 '20 at 04:04
For those who had the same problem with mine, please check the solution below https://spin.atomicobject.com/2015/07/14/css-responsive-square/ — Gwein, Jul 25 '20 at 04:04

Maintain image aspect ratio (square) with container height is AUTO

1 Answers1