如何从中心显示图片，小框架更大的图片

Question

页面中有一个长框架（宽度与高度约为3.5：1）。 大多数照片显示为4：3，框架的宽高比较大且不正确。

客户真的很想要长框架，而不是计划到目前为止改变框架尺寸。

目前显示的方式是“宽度调整为框架宽度，然后从照片顶部填充到框架底部”。 以这种方式，几乎一半的照片是从下面切下来的，看起来非常糟糕。

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

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

我该怎么写这个CSS？

注意：这里的“框架”是“div”

Answer 1

如果您想使用img元素，则可以使用position和transform将img置于框架中心，同时保持与 padding 的比例这样：

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

就个人而言，我会使用background-image和background-position。在您的框架上，您可以应用以下CSS：

#myFrame {
    background-image: url('/path/to/image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

• background-size: cover;按比例缩放背景图片，占据画面的100％。

• background-position: center;会将背景图像居中，就像您在所需示例中所概述的一样。

• background-repeat: no-repeat;只是为了阻止背景重复，这是默认行为。

当然，请将/path/to/image.png更改为您的相对图片路径。

Here is an example of this behavior.