如何证明一个图像网格?

Question

我希望所有行都具有相同的宽度，并且图像占用行的全部宽度。图像可以适合覆盖尺寸。我附上了代码笔:https://codepen.io/shridhar_ke/pen/gOvpZOB

.header {
text-align: center;
padding: 32px;
}
.container {
width: 90%;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
}
.row {
display: flex;
padding: 0 4px;
height: 150px;
width: 100%;
margin-top: 8px;
text-align: justify;
}
.row img {
margin-left: 8px;
horizontal-align: middle;
height: 100%;
object-fit: cover;
width:auto;
}

<div class="container">
<div class="row"> 
<img src="https://via.placeholder.com/150x100.png" style="height:100%">
<img src="https://via.placeholder.com/160x200.png">
<img src="https://via.placeholder.com/200x200.png" style="height:100%">
</div>
<div class="row">
<img src="https://via.placeholder.com/180x240.png" style="height:100%">
<img src="https://via.placeholder.com/300x200.png" style="height:100%">
<img src="https://via.placeholder.com/400x200.png" style="height:100%">
</div>
<div class="row">
<img src="https://via.placeholder.com/250x300.png" style="height:100%">
<img src="https://via.placeholder.com/320x200.png" style="height:100%">
<img src="https://via.placeholder.com/240x180.png" style="height:100%">
</div>
</div>

Answer 1

我认为纯CSS是可能的。这里的关键是使用flex属性。

使用flex属性

通过将flex: 1 1 auto;设置为图像，允许它们增长或缩小以填充整个行。

这里唯一的"问题"是，当视窗太小时，一些行将开始收缩，而另一些则不会。这是因为行高度硬编码为150px。下面的代码演示了这一点:

.container {
width: 90%;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
}
.row {
display: flex;
padding: 0 4px;
height: 150px;
width: 100%;
margin-top: 8px;
/* Can be left out:
text-align: justify; */
}
.row img {
margin-left: 8px;
/* This property doesn't exist:
horizontal-align: middle; */
height: 100%;
object-fit: cover;
/* Can be left out:
width: auto; */
flex: 1 1 auto; /* Added this property */
}

<div class="container">
<div class="row">
<img src="https://via.placeholder.com/150x100.png" />
<img src="https://via.placeholder.com/160x200.png" />
<img src="https://via.placeholder.com/200x200.png" />
</div>
<div class="row">
<img src="https://via.placeholder.com/180x240.png" />
<img src="https://via.placeholder.com/300x200.png" />
<img src="https://via.placeholder.com/400x200.png" />
</div>
<div class="row">
<img src="https://via.placeholder.com/250x300.png" />
<img src="https://via.placeholder.com/320x200.png" />
<img src="https://via.placeholder.com/240x180.png" />
</div>
</div>

添加响应单元

这个问题可以通过使用响应单元改变行的高度来解决，比如vw(视口宽度)，就像我在下面的最终版本中所做的那样:

.container {
width: 90%;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
}
.row {
display: flex;
padding: 0 4px;
height: 15vw; /* Changed this property */
width: 100%;
margin-top: 8px;
}
.row img {
margin-left: 8px;
height: 100%;
object-fit: cover;
flex: 1 1 auto; /* Added this property */
}

<div class="container">
<div class="row">
<img src="https://via.placeholder.com/150x100.png" />
<img src="https://via.placeholder.com/160x200.png" />
<img src="https://via.placeholder.com/200x200.png" />
</div>
<div class="row">
<img src="https://via.placeholder.com/180x240.png" />
<img src="https://via.placeholder.com/300x200.png" />
<img src="https://via.placeholder.com/400x200.png" />
</div>
<div class="row">
<img src="https://via.placeholder.com/250x300.png" />
<img src="https://via.placeholder.com/320x200.png" />
<img src="https://via.placeholder.com/240x180.png" />
</div>
</div>