Question

我发布了全宽和响应的缩略图。因为它们很高，我的重量减少了600px。问题是随着屏幕变大，图像在顶部裁剪，而不是在我想要的图像中心。有没有办法让图像在中心裁剪？我不想在这里使用background-image。

这是fiddle。

.large-front-thumbnail {
position: relative;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.large-front-container {
    max-height:600px;
    overflow: hidden;
}

<div class="large-front-container">
<img src="https://static.pexels.com/photos/2855/landscape-mountains-nature-lake.jpg" class="large-front-thumbnail">
</div>

Answer 1

boundary_cube

在所有浏览器中使用：

.large-front-thumbnail {
    position: relative;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    transform: translateY(-50%); /* add this line to move your picture 50% up*/
}

但我建议你使用transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%);描述here

的案例

如何让图像在中心裁剪

1 个答案: