-1

Assume there is a list of lists of images to be displayed on a web page. Images within a list should be grouped in the same, horizontal row (e.g. with display: flex), and those groups should be displayed in a vertical column (e.g. with display: flex; flex-direction: column). The total height of the groups of horizontally ordered images should be equal to the height, of the viewport. The number of image groups and number of images within a groups in the whole list is variable, but I am using two sets of two images apiece as an proof of concept. Furthermore, the original size of these images is variable, so they need to be resized.

How can the images be resized so as to maintain their aspect ratio and fit properly within the webpage without overflow?

I have written the following HTML code with the following CSS to accomplish this. The problem is that the images are not resized (at all) to fit the main div, and the image-group divs overflow the main container. How do I force the image-group divs to shrink to the height of the main-container, and the images to resize to the height of their parent divs?

HTML:

<body>
    <div class="main-container">
        <div class="image-group" id="dup-set-1">
            <img src="./images/1.jpg" class="duplicate-image">
            <img src="./images/2.jpg" class="duplicate-image">
        </div>
        <div class="image-group" id="dup-set-2">
            <img src="./images/3.png">
            <img src="./images/4.jpg">
        </div>
    </div>
</body>

CSS:

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.main-container {
    display: flex;
    flex-direction: column;
    margin: auto;
    width: 100%;
    height: 100vh; /* Make the whole container the height of the viewport*/
    border: 10px red solid;
}

.image-group {
    flex: 1; /* Size the group divs to the height of the main container */
    display: flex;
}

.image-group img {
    max-height: 100%;
    max-width: 100%;
    height: 100%; /* Make the image height fit the height of its parent group div */
    width: auto; /* Scale the image to keep its original apsect ratio */
}

I have seen this question, which suggests using flex-grow and this question; which suggested object-fit; however, these questions dealt only with one image-group (i.e. only one intermediate div) and do not seem to resize the image-group divs.

Ponysopher
  • 41
  • 1
  • 1
  • 5

1 Answers1

2

Working now ... (edit: improved code)

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Modal Popup Page</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        body {
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
        }

        .main-container {
            display: flex;
            flex-direction: column;
            margin: auto;
            max-width: 100%;
            max-height: 100%;
            border: 10px red solid;
        }

        .image-group {
            max-width: 50%;
            max-height: 50%;
            min-width: 50%;
            min-height: 50%;
            display: inline-flex;
            flex-direction: row;
        }

        .image-group img {
            max-width: 100%;
            height: auto;
            object-fit: cover;
        }
    </style>
  </head>
  <body>
    <div class="main-container">
        <div class="image-group" id="dup-set-1">
            <img src="https://images.pexels.com/photos/6102161/pexels-photo-6102161.jpeg?auto=compress&cs=tinysrgb&w=600" class="duplicate-image">
            <img src="https://images.pexels.com/photos/6101986/pexels-photo-6101986.jpeg?auto=compress&cs=tinysrgb&w=600" class="duplicate-image">
        </div>
        <div class="image-group" id="dup-set-2">
            <img src="https://images.pexels.com/photos/3334492/pexels-photo-3334492.jpeg?auto=compress&cs=tinysrgb&w=600">
            <img src="https://images.pexels.com/photos/5802141/pexels-photo-5802141.jpeg?auto=compress&cs=tinysrgb&w=600">
        </div>
    </div>
</body>
</html>

flex css property should use with 3 parameters : grow , shrink, basis

  • grow determine if the flexbox can take full space if have some
  • shrink determine if the flexbox can take more size IF NEEDED !
  • basis determine their limits (size)

Example here :

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Document</title>
    <style>
    body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
    }
    #wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    #wrapper > header {
        width: 100%;
        flex: 0 0 50px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #e5e5e5;
        border-bottom: 1px solid #9b9b9b;
    }
    #wrapper > section {
        width: 100%;
        flex: 1 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    </style>
  </head>
  <body>
    <section id="wrapper">
        <header>HEADER</header>
        <section>CONTENT</section>
    </section>
</body>
</html>
Edvaldo Filho
  • 411
  • 9
  • 1
    Most appreciated. With these changes, I think this more or less is a solution. I did change the object-fit property to "contain" so the whole images would display, scaled down. Thanks also for your explanation of the flex property. It clarifies better what gets obfuscated in some top searches for the term. – Ponysopher Dec 23 '22 at 21:59