如何让图像在中心裁剪

Posted 2023-02-25

【中文标题】如何让图像在中心裁剪

【英文标题】：how to get an image to crop in center

【发布时间】：2017-02-04 02:31:41

【问题描述】：

我制作了全宽和响应式的帖子缩略图。因为它们太高了，所以我将它们裁剪为 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>

【参考方案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 案例