概念
在图像周围创建包装以保持纵横比.使用position: relative;并设置padding-top来定义纵横比.
对于图像，将其设置为position:absolute;以将其定位在包装中.使用object-fit: cover;可在覆盖整个容器的同时保持纵横比.设置width:100%;和height:100%;以填充容器.
解
.home-container {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
margin-left: 250px;
grid-auto-rows: 1fr;
grid-row-gap: 30px;
}
.element-container {
display: flex;
flex-direction: column;
box-sizing: border-box;
min-height: 250px;
border-radius: 10px;
overflow: hidden;
}
.element-img {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 */
margin-bottom: 20px;
}
.element-img > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
}
.element-img中的padding-top是保持纵横比的因素.当您设置padding-top时，您实际上是在创建一个具有指定纵横比的不可见长方体.padding-top是以元素宽度的百分比计算的，因此它保持纵横比，而不考虑元素的实际宽度，这是使其具有响应性的原因.
纵横比
- 宽屏:16:9=56.25%
- 默认:4:3=75%
- 正方形:1:1=100%
- 摄影:3:2=66.66%
- 超大:21:9=42.85%
You can calculate the aspect ratio using the following formula:个
填充百分比=(高度/宽度)*100
16:9 示例:个
56.25=(9/16)*100
或者，您可以只使用您认为最有效的任何百分比:)
示例
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 20px;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ddd;
padding: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.aspect-ratio-16-9 {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.aspect-ratio-16-9 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="grid-container">
<div class="grid-item">
<div class="aspect-ratio-16-9">
<img src="https://via.placeholder.com/300x169" alt="300x169 Image">
</div>
</div>
<div class="grid-item">
<div class="aspect-ratio-16-9">
<img src="https://via.placeholder.com/400x225" alt="400x225 Image">
</div>
</div>
<div class="grid-item">
<div class="aspect-ratio-16-9">
<img src="https://via.placeholder.com/500x281" alt="500x281 Image">
</div>
</div>
<div class="grid-item">
<div class="aspect-ratio-16-9">
<img src="https://via.placeholder.com/600x338" alt="600x338 Image">
</div>
</div>
<div class="grid-item">
<div class="aspect-ratio-16-9">
<img src="https://via.placeholder.com/700x394" alt="700x394 Image">
</div>
</div>
<div class="grid-item">
<div class="aspect-ratio-16-9">
<img src="https://via.placeholder.com/800x450" alt="800x450 Image">
</div>
</div>
<div class="grid-item">
<div class="aspect-ratio-16-9">
<img src="https://via.placeholder.com/900x506" alt="900x506 Image">
</div>
</div>
<div class="grid-item">
<div class="aspect-ratio-16-9">
<img src="https://via.placeholder.com/1000x563" alt="1000x563 Image">
</div>
</div>
</div>
资源
下面我提供了一些相关的资源，这些资源可能会对future 的用户有用，帮助他们理解为什么这样做以及如何工作，并减少实现和调整方面的问题.
