我正在 https://taniaswebpages.com 上进行为期 180 天的网页挑战, 出于某种原因，网站 9 应该在网格中显示 8 张图像。在我的 Mac (Chrome) 上，它工作得很好，但出于某种原因，在我的手机上，我得到的图像下方有空白，Mac 上的 Safari 也是如此。我怎样才能解决这个问题？？我附上了一张显示我正在处理的问题的图片。如果有人可以帮助我解决这个问题，我将不胜感激。
我使用 CSS 网格技术和 flexbox 在网格中显示我的图像。
我的 HTML:
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="taniaWebsite7.css" type="text/css" rel="stylesheet" />
</head>
<body class="mainpage8">
<div class="containerr">
<h1 class="heading">New Zealand 2018 <span> Image Gallery</span></h1>
<div class="gallery">
<div class="gallery-item"><img class="gallery-image" src="1.png" alt="one" /></div>
<div class="gallery-item"><img class="gallery-image" src="2.png" alt="two" /></div>
<div class="gallery-item"><img class="gallery-image" src="3.png" alt="three" /></div>
<div class="gallery-item"><img class="gallery-image" src="4.png" alt="four" /></div>
<div class="gallery-item"><img class="gallery-image" src="5.png" alt="five" /></div>
<div class="gallery-item"><img class="gallery-image" src="6.png" alt="six" /></div>
<div class="gallery-item"><img class="gallery-image" src="7.png" alt="seven" /></div>
<div class="gallery-item"><img class="gallery-image" src="8.png" alt="eight" /></div>
</div>
</div>
</body>
</html>
CSS:
.heading {
font-family: oswald;
font-size: 4rem;
font-weight: 500;
line-height: 1.5;
text-align: center;
padding: 3.5rem 0;
color:lightblue;
}
.heading span {
display: block;
}
.gallery {
display: flex;
flex-wrap: wrap;
/* Compensate for excess margin on outer gallery flex items */
margin: -1rem -1rem;
}
.gallery-item {
flex: 1 0 24rem;
margin: 1rem;
box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.gallery-image {
display: block;
width: 100%;
height: 50%;
object-fit: cover;
transition: transform 400ms ease-out;
}
.gallery-image:hover {
transform: scale(1.15);
}
@supports (display: grid) {
.gallery {
grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
grid-gap: 2rem;
}
.gallery,
.gallery-item {
}
}
最佳答案
如果您从包含图像的 .gallery-item 中删除高度，它将折叠为内部图像的大小。除非给定高度，否则图像会保持其比例，但我不建议这样做，因为它会严重扭曲图像。
这是一篇关于图像比率的有用文章:https://designshack.net/articles/layouts/understanding-and-working-with-aspect-ratio/
关于html - 当我在手机或 Safari 上查看我的网页时，为什么我的 CSS 网格和 flexbox 图像显示空白区域？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53980918/