放大图片中心而不是改变高度答案

【问题标题】：Zoom inside a center of a picture instead of changing height放大图片中心而不是改变高度
【发布时间】：2017-05-27 15:34:10
【问题描述】：

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

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

【问题讨论】：

以百分比给出高度！
能不能放到js fiddle里？
用max-height: 350px替换height: 350px

标签： html css twitter-bootstrap

【解决方案1】：

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

【讨论】：