Question

我的网站中心有一个图库 - 它有一个动态宽度（引导列）和固定高度（80vh）。我希望里面的图像的容器宽度为50%，350px高度为

<div class="row">
  <div class="col-md-3"></div>
  <div class="col-md-6" style="height: 80vh;">
    <div style="overflow-y: auto;">
      <div style="width: 50%; height: 350px; float: left">
        <img src="..." style="min-width: 100%; height: 350px;">
      </div>
      <div style="width: 50%; height: 350px; float: left">
        <img src="..." style="min-width: 100%; height: 350px;">
      </div>
      <div style="width: 50%; height: 350px; float: left">
        <img src="..." style="min-width: 100%; height: 350px;">
      </div>
    </div>
  </div>
  <div class="col-md-3"></div>
</div>

问题是，当我调整网站大小时，宽度会改变，高度保持不变 - 图像会调整大小。有更好的解决方案吗？我一直在考虑放大图像而不是调整整个尺寸 - 这可能吗？

Answer 1

如果您必须为每个图库项目使用350px高度并希望图像保持纵横比，则可以使用background-size: cover放大并裁剪图像，而不是调整图像大小。请参阅：https://jsfiddle.net/nelonoel/c8zsscuL/

缩放图片中心而不是改变高度

1 个答案: