this is a picture of the issue I am currently coding a website for a client. This is a portfolio website to showcase their photography and im running into an issue with my layout. I have one div as my parent with the class of row on it then i have my picture elements wrapped in divs with the column class. The issue i seem to be running into is that the browser/HTML thinks my divs are bigger than they are and it is creating white space on the bottom of some of the columns. I have found one work around be it requires me to change the height of my images to 16% and have the object-fit set to cover but now the images are cut off and all the same size square. I was hoping somebody could point me in the right direction to get my divs to not add so much white space. i will provide my code and an image of the issue below.
<div class="row">
<div class="column">
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/bill-ironstand-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/bill-ironstand-xs.webp">
<img src="img-portrait/bill-ironstand.webp" alt="Portrait of Bill Ironstand">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/christmas-day-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/christmas-day-xs.webp">
<img src="img-portrait/christmas-day.webp" alt="Portrait of a baby on christmas day">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/business-woman-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/business-woman-xs.webp">
<img src="img-portrait/business-woman.webp" alt="Portrait of a business woman">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/richardson-family-photo-3-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/richardson-family-photo-3-xs.webp">
<img src="img-portrait/richardson-family-photo-3.webp" alt="Family Portrait of the Richardsons">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/sydney-boyce-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/sydney-boyce-xs.webp">
<img src="img-portrait/sydney-boyce.webp" alt="Portrait of Syney Boyce">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/yellow-mits-front-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/yellow-mits-front-xs.webp">
<img src="img-portrait/yellow-mits-front.webp" alt="Portrait of man with yellow mits">
</picture>
</div>
<div class="column">
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/adrielle-aquino-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/adrielle-aquino-xs.webp">
<img src="img-portrait/adrielle-aquino.webp" alt="Portrait of Adrielle Aquino">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/alexa-broen-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/alexa-broen-xs.webp">
<img src="img-portrait/alexa-broen.webp" alt="Portrait of Alexa Broen">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/amie-doucette-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/amie-doucette-xs.webp">
<img src="img-portrait/amie-doucette.webp" alt="Portait of Amie Doucette">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/andrea-klapstein-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/andrea-klapstein-xs.webp">
<img src="img-portrait/andrea-klapstein.webp" alt="Portait of Andrea Klapstein">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/band-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/band-xs.webp">
<img src="img-portrait/band.webp" alt="Portait of a Band">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/bill-ironstand-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/bill-ironstand-xs.webp">
<img src="img-portrait/bill-ironstand.webp" alt="Second portait of Bill Ironstand">
</picture>
</div>
<div class="column">
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/blazer-woman-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/blazer-woman-xs.webp">
<img src="img-portrait/blazer-woman.webp" alt="Portait of a woman with a blazer">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/blue-suit-2-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/blue-suit-2-xs.webp">
<img src="img-portrait/blue-suit-2.webp" alt="Portait of man in blue suit">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/blue-suit-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/blue-suit-xs.webp">
<img src="img-portrait/blue-suit.webp" alt="Close up portait of man in blue suit">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/christmas-fam-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/christmas-fam-xs.webp">
<img src="img-portrait/christmas-fam.webp" alt="Portait of a family on christmas day">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/couple-hug-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/couple-hug-xs.webp">
<img src="img-portrait/couple-hug.webp" alt="Portait of a couple embracing">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/couple-pink-front-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/couple-pink-front-xs.webp">
<img src="img-portrait/couple-pink-front.webp" alt="Portait of a couple">
</picture>
</div>
<div class="column">
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/curly-hair-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/curly-hair-xs.webp">
<img src="img-portrait/curly-hair.webp" alt="Portait of a woman with curly hair">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/dree-beaudry-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/dree-beaudry-xs.webp">
<img src="img-portrait/dree-beaudry.webp" alt="Portait of Dree Beaudry">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/driver-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/driver-xs.webp">
<img src="img-portrait/driver.webp" alt="Portrait of a Driver">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/evan-oliver-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/evan-oliver-xs.webp">
<img src="img-portrait/evan-oliver.webp" alt="Portrait of Evan Oliver">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/family-portait-2-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/family-portait-2-xs.webp">
<img src="img-portrait/family-portait-2.webp" alt="Second Family Portrait">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/family-portait-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/family-portait-xs.webp">
<img src="img-portrait/family-portait.webp" alt="Third Family Portrait">
</picture>
</div>
<div class="column">
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/henry-deng-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/henry-deng-xs.webp">
<img src="img-portrait/henry-deng.webp" alt="Portrait of Henry Deng">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/hilary-meng-2-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/hilary-meng-2-xs.webp">
<img src="img-portrait/hilary-meng-2.webp" alt="Portrait of Hilary Meng">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/hilary-meng-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/hilary-meng-xs.webp">
<img src="img-portrait/hilary-meng.webp" alt="Second portrait of Hilary Meng">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/joel-rf-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/joel-rf-xs.webp">
<img src="img-portrait/joel-rf.webp" alt="Portrait of Joel">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/lisa-bains-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/lisa-bains-xs.webp">
<img src="img-portrait/lisa-bains.webp" alt="Portrait of Lisa Bains">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/man-dog-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/man-dog-xs.webp">
<img src="img-portrait/man-dog.webp" alt="Portrait of a man and his dog">
</picture>
</div>
<div class="column">
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/man-green-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/man-green-xs.webp">
<img src="img-portrait/man-green.webp" alt="portrait of a man in a green sweatshirt">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/man-zip-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/man-zip-xs.webp">
<img src="img-portrait/man-zip.webp" alt="Portrait of a man in a zip up jacket">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/mayra-chavez-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/mayra-chavez-xs.webp">
<img src="img-portrait/mayra-chavez.webp" alt="Portrait of Mayra Chavez">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/nakai-2-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/nakai-2-xs.webp">
<img src="img-portrait/nakai-2.webp" alt="Portrait of Nakai">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/nakai-bumper-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/nakai-bumper-xs.webp">
<img src="img-portrait/nakai-bumper.webp" alt="Portrait of Nakai">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/nakai-close-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/nakai-close-xs.webp">
<img src="img-portrait/nakai-close.webp" alt="Portrait of Nakai">
</picture>
</div>
<div class="column">
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/nakai-light-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/nakai-light-xs.webp">
<img src="img-portrait/nakai-light.webp" alt="Portrait of Nakai">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/nakai-mask-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/nakai-mask-xs.webp">
<img src="img-portrait/nakai-mask.webp" alt="Portrait of Nakai">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/nakai-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/nakai-xs.webp">
<img src="img-portrait/nakai.webp" alt="Portrait of Nakai">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/richardson-family-photo-2-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/richardson-family-photo-2-xs.webp">
<img src="img-portrait/richardson-family-photo-2.webp" alt="richardson family portrait">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/richardson-family-photo-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/richardson-family-photo-xs.webp">
<img src="img-portrait/richardson-family-photo.webp" alt="richardson family portrait">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/senuda-sydney-2-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/senuda-sydney-2-xs.webp">
<img src="img-portrait/senuda-sydney-2.webp" alt="portrait of Sydney Senuda">
</picture>
</div>
<div class="column">
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/senuda-sydney-md.webp alt=">
<source media="(min-width: 320px)" srcset="img-portrait/senuda-sydney-xs.webp">
<img src="img-portrait/senuda-sydney.webp" alt="portrait of Sydney and Senuda">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/senuda-wettasinghe-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/senuda-wettasinghe-xs.webp">
<img src="img-portrait/senuda-wettasinghe.webp" alt="portrait of Sydney and Senuda">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/singer-2-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/singer-2-xs.webp">
<img src="img-portrait/singer-2.webp" alt="portrait of a singer">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/singer-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/singer-xs.webp">
<img src="img-portrait/singer.webp" alt="portrait of a singer">
</picture>
<picture>
<source media="(min-width: 600px)" srcset="img-portrait/yellow-mits-md.webp">
<source media="(min-width: 320px)" srcset="img-portrait/yellow-mits-xs.webp">
<img src="img-portrait/yellow-mits.webp" alt="Portrait of a man with yellow mits">
</picture>
</div>
</div>
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
max-height: 50%;
}
.column picture {
margin-top: 1rem;
}
.column img {
width: 100%;
object-fit: cover;
height: 16%;
display: block;
margin-bottom: 1rem;
}
/* Media queries for responsiveness */
@media screen and (max-width: 760px) {
.column {
flex: 50%;
max-width: 50%;
}
}
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
this is my CSS and HTML currently i have the object-fit:cover and the height:16% this is the way i was able to work around it but it crops the images and makes them all the same size. I want to avoid doing that
2
I think your issue comes with the padding value “column class”:
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
max-height: 50%;}
You are assigning 4 pixels both to left and right padding. (Take into account that when you only provide 2 values, the first one is assigned to both top and bottom padding, and the second one is assigned to both left and right).
For more information, take a look at this article: https://www.geeksforgeeks.org/css-padding/
4
Okay, now that I’m clear on what the problem is, it’s being caused by this line of code. If you remove it you will see the difference straight away.
.column img {
height: 16%;
}
It doesn’t make sense to set a height for the images in your intended layout. Don’t you want to use a variety of images with different aspect ratios?
I would use the oft-neglected multiple columns feature of CSS, rather than flex, for this particular layout.
const a = []
for (i = 0; i < 50; i++) {
const id = Math.floor(Math.random() * 1000)
const height = Math.floor(Math.random() * 200) + 200
a.push(`<img src="https://picsum.photos/id/${id}/300/${height}">`)
}
document.body.innerHTML = a.join('')body {
margin: 1em;
column-width: 300px;
gap: 1em;
background: #555;
}
img {
display: block;
width: 100%;
margin-bottom: 1em;
}3