I'm making a responsive photo gallery using CSS grid. Everything is mostly fine until you stretch the browser width to above 1240px. One image should take up the space of four images but as the browser gets really big the image doesn't take up all the space that I want it to. I think it's because the original size of the image is 800x600. Any help would be greatly appreciated. I'm doing the project on CodePen if you would like to see it: https://codepen.io/Zakkku/pen/JjrPPGo
<style>
.gallery {
display: flex;
flex-direction: column;
gap: 10px;
}
img {
max-width: 100%;
height: auto;
width: auto;
object-fit: fill;
}
@media screen and (min-width: 768px) {
.gallery {
display: grid;
grid-template-columns: auto auto;
}
}
@media screen and (min-width: 1024px) {
.gallery {
display: grid;
grid-template-columns: auto auto auto;
}
.noods {
grid-area: 1 / 2 / 3 / 4;
object-fit: fill;
}
}
</style>
<body>
<div class="gallery">
<div class="pic">
<img src="https://images.unsplash.com/photo-1477925518023-22b33cbd802c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc1MzY&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Figs" width="800" height="600">
</div>
<div class="pic noods"><img src="https://images.unsplash.com/photo-1462618521524-07d259ab774a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc2NTU&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Noodles"></div>
<div class="pic"><img src="https://images.unsplash.com/44/Y51aFguqRcGTgsYRYBXV_20140104_085932.jpg?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc3NDA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Razzberries"></div>
<div class="pic"><img src="https://images.unsplash.com/24/Tea-Time.png?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc4NTc&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Green Tea"></div>
<div class="pic"><img src="https://images.unsplash.com/photo-1471193945509-9ad0617afabf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0NzkwMg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Veggies"></div>
<div class="pic"><img src="https://images.unsplash.com/photo-1433155805822-ffc337821a5b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0Nzk0Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Brilliant Buffet"></div>
<div class="pic"><img src="https://images.unsplash.com/photo-1470162656305-6f429ba817bf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0Nzk4Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="More Green Tea"></div>
<div class="pic"><img src="https://images.unsplash.com/photo-1443131307017-4097c8ac7763?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0ODI3Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="lemonade"></div>
<div class="pic"><img src="https://images.unsplash.com/photo-1474152042542-1e794677a34b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0ODM1NA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800" alt="Grapes"></div>
</div>
</body>
</html>```
CodePudding user response：
Per Sujan Sundareswaran here is a working example.
.gallery {
display: flex;
flex-direction: column;
gap: 10px;
}
img {
max-width: 100%;
height: auto;
width: auto;
object-fit: fill;
}
@media screen and (min-width: 768px) {
.gallery {
display: grid;
grid-template-columns: auto auto;
}
}
@media screen and (min-width: 1024px) {
.gallery {
display: grid;
grid-template-columns: auto auto auto;
}
.noods {
grid-area: 1 / 2 / 3 / 4;
object-fit: fill;
background-image: url("https://images.unsplash.com/photo-1462618521524-07d259ab774a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc2NTU&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800");
background-size: cover;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
</head>
<body>
<div class="gallery">
<div class="pic">
<img
src="https://images.unsplash.com/photo-1477925518023-22b33cbd802c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc1MzY&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="Figs" width="800" height="600">
</div>
<div class="pic noods"></div>
<div class="pic"><img
src="https://images.unsplash.com/44/Y51aFguqRcGTgsYRYBXV_20140104_085932.jpg?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc3NDA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="Razzberries"></div>
<div class="pic"><img
src="https://images.unsplash.com/24/Tea-Time.png?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc4NTc&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="Green Tea"></div>
<div class="pic"><img
src="https://images.unsplash.com/photo-1471193945509-9ad0617afabf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0NzkwMg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="Veggies"></div>
<div class="pic"><img
src="https://images.unsplash.com/photo-1433155805822-ffc337821a5b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0Nzk0Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="Brilliant Buffet"></div>
<div class="pic"><img
src="https://images.unsplash.com/photo-1470162656305-6f429ba817bf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0Nzk4Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="More Green Tea"></div>
<div class="pic"><img
src="https://images.unsplash.com/photo-1443131307017-4097c8ac7763?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0ODI3Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="lemonade"></div>
<div class="pic"><img
src="https://images.unsplash.com/photo-1474152042542-1e794677a34b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0ODM1NA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
alt="Grapes"></div>
</div>
</body>
</html>CodePudding user response：
it's working, only check below and work great. no need to more
img {
max-width: 100%;
height: auto;
width: 100%;
object-fit: fill;
}