保持网格字段100%屏幕宽度

Question

在这个例子中，我只是想创建一个网格，有4个相同大小的盒子，当屏幕尺寸变小时应该重新缩放。然而，我已经没有主意了。我在完整代码中的其他网格中也使用了几乎相同的属性，并且它们正常地重新缩放。知道这是怎么回事吗?

.four-images{
width: 100%;
grid-column: 1/5;
grid-row: 2/3;
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
}
.four-images-image{
width: 100%;
grid-column: 1/2
}
.four-images-image1{
grid-column: 2/3
}

.four-images-image2{
grid-column: 3/4
}
.four-images-image3{
grid-column: 4/5
}
.four-images img{
object-fit: cover;
overflow: hidden;
}

<div class="four-images">
<div class="four-images-image">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
</div>
<div class="four-images-image1">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
</div>
<div class="four-images-image2">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
</div>
<div class="four-images-image3">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
</div>
</div>

Answer 1

如果我理解你的问题，你希望你的图像在你缩放视口宽度时调整大小，这样它就不会溢出/剪辑掉屏幕，同时保持图像的宽高比。要做到这一点，您需要实际修改图像的宽度，而不仅仅是object-fit。Object-fit将它装入特定的维度，但不修改该维度。我已经把你的代码压缩了一点，但是你仍然可以把它和你自己的类/id一起使用。

.four-images{
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
}
.four-images-image img{
display: block;
max-width: 100%;
height: auto
}

<div class="four-images">
<div class="four-images-image">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
</div>
<div class="four-images-image">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
</div>
<div class="four-images-image">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
</div>
<div class="four-images-image">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
</div>
</div>

为了进一步说明，这里我为网格父元素添加一个边框，并使图像透明。正如你所看到的，object-fit实际上并没有改变图像的大小，它会溢出网格。

/* Just modifying the object-fit */
.parent-grid {
width: 5%;
grid-template-columns: 1fr;
grid-template-rows: auto;
border: 2px solid red;
}
.parent-grid > .parent-img > img {
opacity: .5;
object-fit: cover;
}
/* If the width of the image is modified */
.parent-grid-2 {
width: 5%;
grid-template-columns: 1fr;
grid-template-rows: auto;
border: 2px solid red;
}
.parent-grid-2 > .parent-img > img {
width: 100%;
}

<div class="parent-grid">
<div class="parent-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
</div>
</div>
<br>
<div class="parent-grid-2">
<div class="parent-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAACVBMVEX///8DAQQAAABKx2UUAAABG0lEQVR4nO3PQQ3AMBDAsLb8QY9Bf9PkW4wgWXu69XXA6zr0dejr0Nehr0Pf7w7PBLfDsyY4HfI69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69HXo69DXoa9DX4e+Dn0d+jr0dejr0Nehr0Nfh74OfR36OvR16OvQ16GvQ1+Hvg59Hfo69N0O95lg3w4H6tDXoa9DX4e+Dn0d+h6tMzE9MLfjigAAAABJRU5ErkJggg==">
</div>
</div>