时间戳

首页 > 解决方案 > 保持网格字段为 100% 屏幕宽度

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

问题描述

在此示例中，我只想创建一个包含 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>

标签： htmlcss

解决方案

如果我理解您的问题，您希望在缩小视口宽度时缩小图像的大小，以便在保持图像纵横比的同时不会溢出/剪切屏幕。为此，您需要实际修改图像的宽度，而不仅仅是对象拟合。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>

推荐阅读