我是 CSS 网格新手
我有一个背景图像，其大小大于网格大小，如何使图像适合与网格大小相同的网格
当我尝试将背景图像放入网格时，它超出了网格的大小 html
.warper{
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:100px 600px 400px 80px;
}
.header{grid-column-start:1;
grid-column-end:3}
.jumbo{grid-column-start:1;
grid-column-end:3}
.cards{grid-column-start:1;
grid-column-end:3}
.footer{grid-column-start:1;
grid-column-end:3}
.header{
display:grid;
grid-template-columns:100px 1fr 1fr;
}
.logo{height:80px;
width:80px}
ul {
list-style-type: none;
}
a{text-decoration:none}
li{ display: inline-block;
margin:10px
}
.links {display: flex;
justify-content: center;}
.jumbo{
display:grid;
grid-template-columns: 1fr;
grid-template-rows: 500px
}
.cover{object-fit: cover;
width: 100%;}<body>
<div class="warper">
<div class="header">
<div class="navbar">
<img class="logo" src="download.png"></div>
<div class="logogrid">
<h2>TechJuice</h2></div>
<div class="links">
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</div>
</div>
<div class="jumbo"><img class="cover" src="photo-1478358161113-b0e11994a36b.jpg"></div>
<div class="cards">cards</div>
<div class="footer">footer</div>
</div>
</body>最佳答案
如果您使用object-fit，则必须定义图像的高度和宽度。
或者您可以使用背景属性。下面是使用background-size的解决方案。
.warper{
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:100px 600px 400px 80px;
}
.header{grid-column-start:1;
grid-column-end:3}
.jumbo{grid-column-start:1;
grid-column-end:3}
.cards{grid-column-start:1;
grid-column-end:3}
.footer{grid-column-start:1;
grid-column-end:3}
.header{
display:grid;
grid-template-columns:100px 1fr 1fr;
}
.logo{height:80px;
width:80px}
ul {
list-style-type: none;
}
a{text-decoration:none}
li{ display: inline-block;
margin:10px
}
.links {display: flex;
justify-content: center;}
.jumbo{
display:grid;
grid-template-columns: 1fr;
grid-template-rows: 500px;background:url(https://dummyimage.com/600x400/000/fff) no-repeat;background-size:100%;background-position:center center;
}
.cover{object-fit: cover;
width: 100%;}<body>
<div class="warper">
<div class="header">
<div class="navbar">
<img class="logo" src="https://dummyimage.com/600x400/000/fff"></div>
<div class="logogrid">
<h2>TechJuice</h2></div>
<div class="links">
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</div>
</div>
<div class="jumbo"><!--<img class="cover" src="https://dummyimage.com/600x400/000/fff">--></div>
<div class="cards">cards</div>
<div class="footer">footer</div>
</div>
</body>关于html - 将图像包含在 CSS 网格内，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57653487/