html - 在图片中心放大而不是改变高度

Question

我的网站中心有一个画廊 - 它具有动态宽度( Bootstrap 列)和固定高度(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/