What is the best way to ensure that a Flex div and its child images stay confined within the boundaries of its parent container?

I'm struggling to create a responsive grid of images. I can't get the images to be both responsive with max-height and max-width, while also making sure the parent div takes up their full width. On the other hand, if I make the parent div the correct width, the images lose their responsiveness. Can anyone provide guidance on how to achieve this dual functionality successfully?

JSFiddle

#grid_area {
    display: flex;
    height: 100%;
    width: 100%;
    position: absolute;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#grid {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 80%;
    width: 50%;
}

img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <div id="grid_area">
        <div id="grid">
            <div class="row" id="0">
                <img src="https://source.unsplash.com/random/460x345/" id="A1">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="B1">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="C1">
            </div>
            <div class="row" id="1">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="A2">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="B2">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="C2">
            </div>
            <div class="row" id="2">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="A3">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="B3">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="C3">
            </div>
            <div class="row" id="3">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="A4">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="B4">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="C4">
            </div>
        </div>
    </div>
</body>


</html>

htmlcssflexbox

Answer №1

If you want to arrange your images using CSS Grid, you can set a max-width: (x)px for the .grid-area element.

Next, define a grid with 4 rows and 3 columns within your grid-area:

display: grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: repeat(3, 1fr);

After that, each image you add as a child element will automatically be placed within the grid.

You can also adjust the positions of your images inside the Grid using the grid-column and grid-row properties.

For example, I changed the position of the #A1 image in the grid like this:

#A1 {
grid-column: 2 / 3;
grid-row: 2/ 3;
}

Check out this link for more information on CSS Grid: https://www.w3schools.com/css/css_grid.asp

img {
  max-width: 100%;
  display: block;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

.grid_area {
  max-height: 80%;
  max-width: 50%;
  margin: auto;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

#A1 {
  grid-column: 2 / 3;
  grid-row: 2/ 3;
}
<div class="grid_area">
      <img src="https://source.unsplash.com/random/460x345/" id="A1" />
      <img src="https://www.w3schools.com/css/img_chania.jpg" id="B1" />
      <img src="https://www.w3schools.com/css/img_chania.jpg" id="C1" />

      <img src="https://www.w3schools.com/css/img_chania.jpg" id="A2" />
      <img src="https://www.w3schools.com/css/img_chania.jpg" id="B2" />
      <img src="https://www.w3schools.com/css/img_chania.jpg" id="C2" />

      <img src="https://www.w3schools.com/css/img_chania.jpg" id="A3" />
      <img src="https://www.w3schools.com/css/img_chania.jpg" id="B3" />
      <img src="https://www.w3schools.com/css/img_chania.jpg" id="C3" />

      <img src="https://www.w3schools.com/css/img_chania.jpg" id="A4" />
      <img src="https://www.w3schools.com/css/img_chania.jpg" id="B4" />
      <img src="https://www.w3schools.com/css/img_chania.jpg" id="C4" />
</div>

Answer №2

Take a look at this code snippet->

* {
  margin: 0;
  padding: 0;
}
html,body {
  width:100%;
  height: 100%;
  box-sizing: border-box;
}
#grid_area {
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
    align-content: center;
    justify-content: center;
    align-items: center;
    background-color: #aaa;
}

#grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 80%;
    width: 50%;
    padding: 10px;
    background-color: #fff;
    overflow-y: scroll;
}

img {
  max-width: calc(100% / 3);
  max-height: 100%;
  object-fit: contain;
}

.row {
  display: flex;
  flex-direction: row;
}

@media (max-width: 600px) {
    img {
      max-width: calc(100%);
    }
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <div id="grid_area">
        <div id="grid">
            <div class="row" id="0">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="A1">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="B1">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="C1">
            </div>
            <div class="row" id="1">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="A2">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="B2">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="C2">
            </div>
            <div class="row" id="2">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="A3">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="B3">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="C3">
            </div>
            <div class="row" id="3">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="A4">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="B4">
                <img src="https://www.w3schools.com/css/img_chania.jpg" id="C4">
            </div>
        </div>
    </div>
</body>


</html>
Hopefully, this will be helpful.

Answer №3

Just a couple of pointers: Firstly, it's best to remove the absolute positioning from the parent element #grid_area as it could create issues when expanding the design.

The setting width: 50%; might not provide enough room for your content. You could consider removing the width property altogether and letting it adjust based on the content.

#grid_area {
  display: flex;
  height: 100%;
  width: 50%;
  align-content: center;
  align-items: center;
  margin: auto;
}

#grid {
  position: relative;
  display: flex;
  align-items: flex-start;  
  height: 80%;
  width: 100%;
}

img {
  max-width: 100%;
  max-height: 100%;
  width: calc(100% / 3);
  object-fit: contain;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="grid_area">
    <div id="grid">
      <div class="row" id="0">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="A1">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="B1">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="C1">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="A2">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="B2">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="C2">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="A3">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="B3">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="C3">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="A4">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="B4">
        <img src="https://www.w3schools.com/css/img_chania.jpg" id="C4">
      </div>
    </div>
  </div>
</body>


</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

VSCode is indicating a CSS error, requesting an at-rule or selector

I tried to implement a piece of CSS code I found on a website, but I'm encountering an error in this particular section .pricing-table:hover{ box-shadow: 0px 0px 19px -3px rgba(0,0,0,0.36); /*issue starts from this line*/ .pricing-table__button ...

css

Unable to conceal a DIV using React

I'm attempting to hide a div programmatically upon clicking a button. I've written the following code, but it doesn't seem to be working (the Div remains visible): import React, {useState} from 'react'; import './Button.css&ap ...

cssreactjs

Leveraging Google maps to find nearby stores

I recently created a store locator but hit a roadblock when I discovered that Google Maps does not allow you to iframe the entire page. Is there a workaround for this issue to display the map? Or is there an alternative method that doesn't involve ifr ...

c#javascripthtmlasp.netiframe

Creating a CSS design where the border is contained within an element, especially when the border radius is specified

The concept of the title might be a bit confusing, but let me clarify. I am attempting to replicate this particular effect (taken from a .png file): This is essentially half a cycle with a black line inside it. Despite numerous attempts, I have been un ...

htmlcsscss-shapes

Styling an unordered list with CSS in HTML is a powerful

I am working with an unordered list where each list element contains two spans: span A and span B. My goal is to style these elements so that they are displayed horizontally on the screen, with span A above span B in each set. Example: spanAItem1 sp ...

htmlcss

Is it possible to meta-refresh a page for redirection?

When creating a webpage, I included a META tag like this: <META http-equiv="refresh" content="5;URL=http://www.google.com"> The issue is that mobile browsers do not support this meta tag. It redirects properly on web browsers, but not on mobile dev ...

javascriptphphtmlmeta-tags

Turn off Appbar padding at the top and bottom

I am looking to create a customized box within the Appbar that spans the full height, as illustrated in the image below: https://i.stack.imgur.com/CFMo0.jpg However, the default Appbar provides padding from all sides to its internal elements, leading to ...

javascriptcssreactjsmaterial-ui

Clicking the ASP button does not trigger the onclick event when a web user control is included on the webpage

I have been working on a web form application that I developed using the visual studio template. The template includes a content placeholder that gets replaced by the content of each accessed page. One particular page, which contains server controls like t ...

javascriptc#htmlasp.netweb-controls

JavaScript - Uncaught TypeError: type[totypeIndex] is not defined

After following a tutorial and successfully completing the project, I encountered a JavaScript error saying "Uncaught TypeError: totype[totypeIndex] is undefined". When I tried to log the type of totype[totypeIndex], it initially showed as String, but late ...

javascripthtmlcssundefined

The navigation bar seems to be missing in action

I am currently working on a project on Codepen, and I am trying to create a navbar with a dark background color and my name in a light color. However, I am facing issues as it is not displaying as expected. I followed the Bootstrap 4.0 guide available onli ...

htmlbootstrap-4

Always ensure that the full text is responsively aligned to the right of the image

.brand { font-size:1.2em; color:#777 !important; display:inline-block; vertical-align: middle; } .car { display:inline-block; vertical-align: middle; padding:5px 30px 0px 20px; } .car.img { margin:0 !important; width:100% ...

htmlcss

Learn the method for attaching bargraph bars to the bottom without specifying a fixed height

I've been struggling to create a bar graph displaying visitor statistics. The challenge lies in attaching the bars to the bottom without knowing their exact height beforehand. Since my code uses percentages for the height and it fluctuates each time y ...

htmlcss

Generate a list of files and transfer them to an input file

I am currently working on creating a drag and drop area where I can retrieve dataTransfer items using webkitGetAsEntry, and then differentiate between directories and files. My goal is to convert these files into a FileList and transfer them to a file inp ...

javascripthtmlgoogle-chromefileapi

Tips for aligning a pseudoElement in the center below a bootstrap navigation link

Hello, I'm trying to align the line under my menu that was created using a pseudo element. Here is the HTML code: .nav-link.active { color: #482683; font-size: 14px; } .nav-link.active::after { content: ''; display: b ...

htmlcssbootstrap-4css-selectorspseudo-element

Is there a way to adjust the placement of text in an HTML document?

Just starting out with web development and created some HTML code: <html> <body> {errors} <p>Input your numbers:</p> <form method="post" action="."> <p><inpu ...

htmlcsscss-positionwebfonts

Using the linearGradient feature within an SVG to create a transitional effect on the Fill property

Looking to implement a stepper functionality, everything is working smoothly except for the transition on the fill. let step = 0; document.querySelector("button").addEventListener('click', () => { step++; document.querySelector("svg ...

htmlcsssvg

JavaScript event array

I have a JavaScript array that looks like this: var fruits=['apple','orange','peach','strawberry','mango'] I would like to add an event to these elements that will retrieve varieties from my database. Fo ...

phpjavascripthtml

issues with the functionality of bootstrap modal

I'm currently working on a project where I need to set up a modal popup using bootstrap. The website I'm working on is organized by departments, so the only part of the code that I have control over is the main body of the site. I have included t ...

javascriptjqueryhtmlcsstwitter-bootstrap

How to extract hover CSS property from a Selenium WebElement using XPath in Python

Is there a way to detect if a button changes its background color on hover? I know how to get the cursor property: print webElement.value_of_css_property('cursor') But I am unsure how to capture the hover property. ...

pythoncssxpathselenium-webdriver

What impact do varying screen sizes have on the width of CSS?

Can someone explain what this CSS code actually does: .class { width: 800px; } I've noticed that on my laptop screen, the element appears to be exactly 800 pixels wide. However, when I view it on my tablet screen, it shows up as 1600 pixels wide. Th ...

htmlcssresponsive-design