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

我们在页面中有一个很长的框架（大约3.5：1宽度到高度）。大部分照片显示的是4：3，较大和不正确的纵横比的框架。如何从中心显示图片，小框架大图片

客户真正想要长帧，而不是计划到目前为止改变帧大小。

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

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

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

我该怎么写这个CSS？

注： “帧” 这里是一个 “格”

来源

2016-11-16 Benny Ae

你可以设置图像作为背景图像的帧和做background-size：cove R等background-position：center;背景重复：不重复？这将缩放背景以适合整个框架并居中，就像您在第二张图像中一样。 – Santi

“框架”是什么元素？分享你的标记对你有帮助。 – BenM

对不起，“框架”是一个div。 –

一种选择是使用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>

来源

2016-11-16 19:15:33 DaniP

就个人而言，我会使用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更改为您的相对图像路径。如果你想使用img元素

Here is an example of this behavior.

来源

2016-11-16 19:04:44 Santi

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

回答

相关问题