html - 图片如何居中显示，小框大图

Question

页面中有一个长框架(大约 3.5:1 宽高比)。 大多数显示的照片都是 4:3，更大且宽高比不合适。

长镜框是客户真正想要的，暂时没打算改镜框尺寸。

目前它的显示方式是“宽度调整到框架宽度，然后从照片的顶部填充到框架的底部”。 这样一来，几乎一半的照片都是从下面剪下来的，看起来很糟糕。

我知道在不破坏照片的情况下几乎不可能同时适应宽度和高度。

所以我的计划是尝试从中心显示部分照片。

我应该如何编写这个 CSS？

注意:这里的“frame”是一个“div”

Answer 1

如果您想使用 img 元素，一个选项是使用 position 和 transform 使 img 在框架上居中，同时保持比例像这样填充:

.framed {
  position: relative;
  width: 100%;
  /*Proportion 3.5:1 with the padding*/
  padding-top: 28.5%;
  overflow:hidden;
}
.framed img {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<h5>Original Image</h5>
<img src="http://placekitten.com/200" />

<h5>Framed Image</h5>
<div class="framed">
  <img src="http://placekitten.com/200" />
</div>