html - CSS Grid 中的响应式图像
问题描述
我正在尝试在 CSS Grid 中放置一些图片并使其具有响应性,我有一个包含 4 个图像的 div,并将其放入 CSS 网格布局中。我希望他们占用可用空间,但不要离开屏幕。随着屏幕变小,我还想让它们调整大小甚至堆叠。我不知道该怎么做。我曾尝试将 Flexbox 和 Grid 结合起来,但无济于事。如何让它们调整大小并占用空间?
<div class="food-container">
<img class="food-pic food4" src="https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4fa061122a5ce899fcb5454dae8dbe99&auto=format&fit=crop&w=2850&q=80" alt="">
<img class="food-pic food2" src="https://images.unsplash.com/photo-1504544750208-dc0358e63f7f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=be3aa106f944edc77c68fcd567c22bbb&auto=format&fit=crop&w=750&q=80" alt="">
<img class="food-pic food3" src="https://images.unsplash.com/photo-1504185945330-7a3ca1380535?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9f2d35c4ea30a81e428e66c653748f91&auto=format&fit=crop&w=642&q=80" alt="">
<img class="food-pic food1" src="https://images.unsplash.com/photo-1506354666786-959d6d497f1a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=86c8c1fd5e9e5b384696472a095c42ac&auto=format&fit=crop&w=1650&q=80" alt="">
</div>
body {
margin: 0;
box-sizing: border-box
}
.food-container {
height: 40em;
display: grid;
grid-template: 2fr 2fr / 2fr 1fr 1fr;
grid-auto-flow: row;
grid-gap: 1em;
padding: 1em;
}
.food-pic {
width: auto;
height: 100%;
overflow: hidden;
}
.food1 {
grid-row: 1 / 3;
}
.food 2 {
grid-column: 2 / 4;
}
.food3 {
grid-column: 3 / 4;
}
.food4 {
grid-column: 2 / 4;
}
解决方案
我对您的 html 和 CSS 进行了一些更改,以尝试与 grid-template-areas 一起使用,因为您了解每个元素的正确位置可能更简单。
我所做的最大改变是围绕每个图像创建一个 div 以更好地控制它们。object-fit:cover;
在您的 imgs 标签中设置的属性完成了这项工作。
body {
margin: 0;
box-sizing: border-box
}
.food-container {
max-height: 40em;
display: grid;
grid-template: 2fr 2fr / 2fr 1fr 1fr;
grid-gap: 1em;
padding:1em;
grid-template-areas:
"a d d"
"a b c"
}
.food1 {
grid-area: a;
}
.food2 {
grid-area: b;
}
.food3 {
grid-area: c;
}
.food4 {
grid-area: d;
}
.food-container div{
overflow:hidden;
}
img {
width: 100%;
height: 100%;
object-fit:cover;
}
<div class="food-container">
<div class="food1">
<img src="https://images.unsplash.com/photo-1506354666786-959d6d497f1a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=86c8c1fd5e9e5b384696472a095c42ac&auto=format&fit=crop&w=1650&q=80" alt="">
</div>
<div class="food2">
<img src="https://images.unsplash.com/photo-1504544750208-dc0358e63f7f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=be3aa106f944edc77c68fcd567c22bbb&auto=format&fit=crop&w=750&q=80" alt="">
</div>
<div class="food3">
<img src="https://images.unsplash.com/photo-1504185945330-7a3ca1380535?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9f2d35c4ea30a81e428e66c653748f91&auto=format&fit=crop&w=642&q=80" alt="">
</div>
<div class="food4">
<img src="https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4fa061122a5ce899fcb5454dae8dbe99&auto=format&fit=crop&w=2850&q=80" alt="">
</div>
</div>
推荐阅读
- r - 从列表列表到保存列表编号的数据框
- node.js - 当我尝试在 Heroku 上部署时,构建失败
- c# - 如何将 char 数组的内容转换为 C# 中对应的整数值?
- javascript - 如何将 true 或 false 的值更改为文本值类型 我正在检查整个表中的行 注意该表是数据表类型?
- ups - UPS Surepost TimeInTransit API
- java - TimerTask 和结构
- html - 防止 HTML 元素在更改填充时上下摆动
- mongodb - 如何根据第一次出现的分隔符 MongoDB 拆分列
- php - 用 symfony 5 的形式查询问题
- python - 如何捕获 xpath 中的第一个链接?