HTML - Bootstrap - 如何裁剪图像的中心部分

问题描述：

我正在创建一个网站，我想根据图像的方向将图像裁剪为正方形图像。我对CSS不太熟悉，所以我不确定如何解决这个问题。HTML - Bootstrap - 如何裁剪图像的中心部分

如果它是一个风景图像（800x500），那么我想裁剪后的图像是这样的（500×500）：

Cropping 800x500 image

如果是纵向（400x600），那么它应该裁剪掉这部分（400×400 ）图像：

Cropping 400x600 image

我应该如何去实现这一目标？最好有一种方法可以和Bootstrap的“img-responsive”一起使用，这样我可以在需要时调整裁剪大小。

感谢，

答

@ FljpFl0p修复[的jsfiddle] [1]

[1]：https://www.bootply.com/92024并没有在这里How to automatically crop and center an image另一个答案。 TKS！

如果你想它反应灵敏，使用引导4.试试这个：

CSS

.thumb-post img { 
    object-fit: none; /* Do not scale the image */ 
    object-position: center; /* Center the image within the element */ 
    width: 100%; 
    max-height: 250px; 
    margin-bottom: 1rem; 
}

答

添加类IMG-响应img标签，这将扩展您的图像，并保持宽/高比。如果您对结果不满意，我会尝试使用Javascript。

IMG响应只会水平重新调整图像大小，它的容器，没有限制图像的高度。 – FljpFl0p 2015-02-11 17:45:05

我想你必须为此使用Javascript。你可以用max-height属性限制高度，但在你的情况下它是无用的。 – Jimmy 2015-02-11 17:48:19

是的，使用最大高度和溢出：隐藏将帮助我裁剪图像到我想要的大小，唯一的问题是，它将永远是图像的顶部。 – FljpFl0p 2015-02-11 17:50:05

答

不知道，如果你是相当仅限于一个CSS方法，但一个JavaScript方法会通过获取图像的尺寸并用overflow:hidden与div进行包装来获得帮助。

$width = $(".box img").css('width'); 
 
$height = $(".box img").css('height'); 
 
$max = (($width < $height) ? $width : $height); 
 

 
$(".box").css("width", $max); 
 
$(".box").css("height", $max);

.box { 
 
    margin: 5px; 
 
    overflow: hidden; 
 
    display: flex; 
 
    justify-content: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="box"> 
 
    <img src="https://placehold.it/300x200"> 
 
</div>

HTML - Bootstrap - 如何裁剪图像的中心部分

相关推荐