html - 无法使 img 适合 div 大小:CSS Grid
问题描述
嘿,我正试图适应img
它的div
容器。我正在使用 CSS Grid 进行布局。
html,
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-row: auto;
}
.item {
height: 500px;
border: 1px solid black;
}
.banner {
max-width: 100%;
max-height: 100%;
}
/* laptops and desktops */
@media (min-width: 1025px) and (max-width: 1280px) {
.container {
grid-template-columns: repeat(2, 1fr);
grid-row: 1fr;
padding: 60px 130px 20px 130px;
grid-gap: 50px;
}
}
<div class="container">
<div class="item">
<img class="banner" src="https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6672a25aa653266572aaf2be253fb56a&auto=format&fit=crop&w=1000&q=80" />
</div>
<div class="item">
<img class="banner" src="https://images.unsplash.com/photo-1508296695146-257a814070b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bfacf656c686ff7e39ac1386691557be&auto=format&fit=crop&w=1000&q=80" />
</div>
</div>
item
容器底部总是有一个空白区域。图像覆盖了整个容器。有人可以告诉我如何解决这个问题吗?
解决方案
也许这可以帮助你:
html,
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-row: auto;
}
.item {
/*height: 500px;*/
max-width: 500px; /*Remove this line if 500px limit is not important for you. */
border: 1px solid black;
}
.banner {
/*max-width: 100%;
max-height: 100%;*/
width: 100%;
display: block;
}
/* laptops and desktops */
@media (min-width: 1025px) and (max-width: 1280px) {
.container {
grid-template-columns: repeat(2, 1fr);
grid-row: 1fr;
padding: 60px 130px 20px 130px;
grid-gap: 50px;
}
}
<body>
<div class="container">
<div class="item">
<img class="banner" src="https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6672a25aa653266572aaf2be253fb56a&auto=format&fit=crop&w=1000&q=80" />
</div>
<div class="item">
<img class="banner" src="https://images.unsplash.com/photo-1508296695146-257a814070b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bfacf656c686ff7e39ac1386691557be&auto=format&fit=crop&w=1000&q=80" />
</div>
</div>
</body>
推荐阅读
- java - 两个数组之间的相等性
- google-apps-script - 使用 Appscript 将 Google Sheet 中的 3d 图表作为图像插入电子邮件
- reactjs - 无法使用 Reactjs 将图像传递给 ML5
- sql - 我已经用重复的 ID(在问题中显示)明智地获取了数据行,但我希望它按照(输出)中的输出显示
- r - 如果用于设计因变量,我可以使用变量作为解释变量吗?
- javascript - 在无限平滑修改的猫头鹰滑块上添加暂停
- c++ - 线程只运行一次,但他处于无限循环中
- go - 将 Go 程序静态链接到 /usr/lib/libSystem.B.dylib
- java - PLS-00357:此上下文中不允许表、视图或序列引用“CHEM_PHYSICAL_PROPERTIES”
- android - 应用程序以 app bundle 的形式上传到 Google Play 商店后,应用程序签名哈希是否会发生变化?