如何让图像在中心裁剪

Question

我制作了 post 全宽和响应式缩略图。因为它们太高了，所以我将它们裁剪为 600 像素。问题是随着屏幕变大，图像在顶部裁剪，而不是我想要的在图像中心裁剪。有什么办法可以使图像在中心裁剪吗？我不想在这里使用 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

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

但我建议您使用 background-image 描述的案例 here

如何让图像在中心裁剪

how to get an image to crop in center

html

css

image

crop

image-resizing