我正在尝试创建一个div，当您缩放窗口时，它会修剪图片。这可行，但是图像仅在右侧修剪，而不在左侧修剪。
我如何也可以在左侧修剪它，以使图片停留在中间？
我的HTML：
<div class="top-foto">
<img src="http://whatatimeline.com/covers/1330597507de0/balloons-sunset-view-facebook-cover.jpg" alt="Coverphoto">
</div>
而我的CSS：
.top-foto {
position: absolute;
z-index: -1;
width: 100%;
height: 315px;
overflow: hidden;
}
.top-foto > img {
margin: 0 auto;
display: block;
max-width: inherit;
}
完全正确定位图像，并使用使图像居中 translate
* {
margin: 0;
padding: 0;
}
.top-foto {
position: absolute;
z-index: -1;
width: 100%;
height: 315px;
overflow: hidden;
}
.top-foto > img {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: block;
}<div class="top-foto">
<img src="http://whatatimeline.com/covers/1330597507de0/balloons-sunset-view-facebook-cover.jpg" alt="Cover photo" />
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句