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 >
<div id="dup-set-1">
<img src="./images/1.jpg" >
<img src="./images/2.jpg" >
</div>
<div 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.
CodePudding user response：
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 >
<div id="dup-set-1">
<img src="https://images.pexels.com/photos/6102161/pexels-photo-6102161.jpeg?auto=compress&cs=tinysrgb&w=600" >
<img src="https://images.pexels.com/photos/6101986/pexels-photo-6101986.jpeg?auto=compress&cs=tinysrgb&w=600" >
</div>
<div 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
growdetermine if the flexbox can take full space if have someshrinkdetermine if the flexbox can take more size IF NEEDED !basisdetermine 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>CodePudding user response：
Here Is the solution to the problem. I used Unsplash images for this demo these photos are not mine it is just for demo purpose.
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
.main-container {
border: 10px red solid;
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));/*here two is the number of the columns of your images*/
grid-gap: 1.2rem;
}
.image-group {
display: grid;
grid-gap: 2rem;
place-items: center;
object-fit: scale-down;
grid-template-columns: minmax(0,1fr);
}
.image-group img {
max-height: 100%;
max-width: 100%;
}<body>
<div >
<div id="dup-set-1">
<img src="https://images.unsplash.com/photo-1670272502972-cccb4b96c4f4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" >
<img src="https://images.unsplash.com/photo-1671624524528-5822d43e9100?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=392&q=80" >
</div>
<div id="dup-set-2">
<img src="https://images.unsplash.com/photo-1671816551591-d50359cd744c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
<img src="https://images.unsplash.com/photo-1664575600397-88e370cb46b8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
</div>
</div>
</body>I hope you got your answer