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

Question

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

如果它是风景图像（800x500），那么我希望裁剪的图像像这样（500x500）：

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

我应该如何实现这一目标？优选地，我可以使用与Bootstrap＆＃34; img-responsive＆＃34;所以我可以在需要时调整裁剪的大小。

谢谢，

Answer 1

@ FljpFl0p修复它[jsfiddle] [1]

[1]：https://www.bootply.com/92024此处还有另一个答案How to automatically crop and center an image。 TKS！

如果你想要它响应并使用bootstrap 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;
}

Answer 2

为img标签添加类img-responsive，它会缩放图像并保持宽高比。如果您对结果不满意，我会尝试使用Javascript。

Answer 3

不确定您是否仅限于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>

Answer 4

@Állan Fidelis Toledo 的救命稻草

人们可能会发现在 css 'object-fit' 上使用 'contain' 来保持图像的纵横比很有用。 通过设置 max-height，它在 Bootstrap 4 中也很有用。适用于 Bootstrap 4 中的所有“col”类。

.thumb-post img {
  object-fit: contain; /* keep aspect ratio */
  width: 100%;
  max-height: 147px;
  margin-bottom: 1rem;
  padding-right: 10px;
}