如果图像太大，如何裁剪图像-Java 学习之路

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

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

2 回答

尝试这样的事情：

<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>

回复于 2024-04-29T21:37:12+08:00

如果要保持纵横比，请使用 % width并将高度设置为auto .

<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

回复于 2024-04-29T21:37:12+08:00

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

2 回答

相关问题