logo标签列表

在图片中心缩放而非改变高度

htmlcsstwitter-bootstrap
4

我在网站中心有一个画廊 - 它的宽度是动态的（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>

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

也以百分比的形式给出高度！ - sansan
你能把它放到 JSFiddle 上吗？ - sansan
1
将“height: 350px”替换为“max-height: 350px”。 - Banzay
1个回答
0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接