我目前正在为客户编写一个网站。这是一个展示他们摄影作品的作品集网站，我的布局遇到了问题。我有一个 div 作为我的父级，上面有行类，然后我将图片元素包装在带有列类的 div 中。我似乎遇到的问题是浏览器/HTML 认为我的 div 比实际更大，并且它在列之间创建空白。我找到了一种解决方法，它要求我将图像的高度更改为 16%，并将对象适合设置为覆盖，但现在图像被剪掉，并且都是相同大小的正方形。我希望有人能给我指出正确的方向，让我的 div 不添加太多空白。我将在下面提供我的代码和问题的图像。
<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%;
}
}
这是我的 CSS 和 HTML，目前我有 object-fit:cover 和 height:16% 这是我能够解决它的方法，但它会裁剪图像并使它们都具有相同的大小。我想避免这样做
我认为你的问题与填充值“列类”有关：
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
max-height: 50%;}
您正在为左右填充分配 4 个像素。 （请考虑到，当您仅提供 2 个值时，第一个值将分配给顶部和底部填充，第二个值将分配给左侧和右侧）。
有关更多信息，请查看这篇文章：https://www.geeksforgeeks.org/css-padding/