我的网站图像显示了问题 我的响应式图像网格遇到问题。我从这个网站得到了这个想法https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp我希望我的布局几乎与此完全相同，但是我在中型和大视口上得到垂直空白。我的专栏不像网站上显示的那样堆叠
<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/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>
<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>
</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/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/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/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>
</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/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>
<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/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/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>
</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/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>
<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/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 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/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/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/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/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/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-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/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>
</div>
</div>
this is my HTML structure above
* {
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0; /* No extra padding */
margin: 0; /* No extra margin */
align-items: flex-start; /* Align items at the top */
}
.column {
flex: 1 1 25%; /* Adjust width of columns */
padding: 0 4px; /* Padding between columns */
display: flex; /* Make columns flex containers */
flex-direction: column; /* Stack children vertically */
box-sizing: border-box; /* Ensure padding and border are included in width */
}
.column img {
margin: 0; /* Remove margin around images */
width: 100%; /* Ensure images fit the column width */
height: auto; /* Ensure images scale correctly */
}
@media screen and (max-width: 800px) {
.column {
flex: 1 1 50%; /* Adjust columns to 50% width on medium screens */
}
}
@media screen and (max-width: 600px) {
.column {
flex: 1 1 100%; /* Adjust columns to 100% width on small screens */
}
}
这是我的CSS，我不确定我做错了什么，如果有人可以帮助我，我将不胜感激。
您的 HTML 有 8 列。 css 给每列 25% 的宽度。
flex: 1 1 25%; /* Adjust width of columns */您可能不小心双击了 html，但如果不是这种情况，您可以尝试将列宽设置为 12.5%。至于空间，各列堆叠成 2 行，每行 4 行，尽管它们都位于同一“行”div 中。您的柱子还需要具有相似的高度。 W3 学校示例显示一列包含 6 张图像，另一列包含 7 张图像。希望这会有所帮助。很高兴在 html 中看到一些响应式设计