Question

我有一些大图，我需要调整大小并裁剪。我想将它们设置为宽度的250倍 - 这在css中很容易。但我也想保持纵横比，在这样做时我最终得到了不同高度的图像。现在，我想从高处裁剪它们，以确保每个高度为250x或更高的图像都会被裁剪（优先居中）。我该怎么做呢？

修改好吧，我想我原来的帖子里并不清楚。我想要的是：将图像的宽度调整为250px。如果高度> 150px，则在保持250px宽度的同时缩小图像。

Answer 1

尝试这样的事情：

<div style="position:absolute;top:0;left:0;width:250px;height:250px;overflow:hidden;">
    <div style="position:relative;top:0;left:0;height:250px;">
         <img style="height:100%;min-height:250px" src="path/to/img" />
    </div>
</div>

Answer 2

如果您想保持纵横比，请使用%宽度＆amp;将高度设置为自动。

<div style="width:250px;height:250px;overflow:hidden;">
    
         <img style="width:100%;height:auto;" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ3TbEJkubLP_qomeNunFXpKrweFBAitDgsGGADiKVzNICNZ5a6" />
    
</div>

另一种选择是将图像设置为背景图像并包含/覆盖它。 background-size:contain;或background-size:cover;。

.center-cropped {
  height: 150px;//Crop if height>150
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="center-cropped" 
     style="width:250px;background-image:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ3TbEJkubLP_qomeNunFXpKrweFBAitDgsGGADiKVzNICNZ5a6);">
</div>

参考：Crop & center image

如果图像太大，如何裁剪图像

2 个答案: