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

Question

我正在创建一个网站，想要根据图像的方向将其裁剪为正方形的图像。我不太熟悉CSS，不知道如何解决这个问题。

如果是横向图像（800x500），则要将裁剪后的图像变成这样（500x500）： 如果是纵向图像（400x600），则应该裁剪出图像的这一部分（400x400）： 我应该如何实现这个过程？最好使用可以与Bootstrap的“img-responsive”一起使用的方法，以便在需要调整大小时可以调整裁剪后的图片。

谢谢。

- FljpFl0p

Answer 1

@FljpFl0p 修复它 [jsfiddle][1]

[1]: https://www.bootply.com/92024 还有另一个答案在这里 如何自动裁剪和居中图像。谢谢！

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

- Állan Fidelis Toledo

Answer 2

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

- ajib

Answer 3

在img标签中添加class img-responsive，这将缩放您的图像并保持宽度/高度比例。如果您对结果不满意，可以尝试使用Javascript。

- Jimmy

---

img-responsive 只会水平缩放图像以适应其容器的大小，对图像的高度没有限制。 - FljpFl0p

我猜你得用JavaScript来实现。你可以通过max-height属性限制高度，但在你的情况下没什么用处。 - Jimmy

是的，使用max-height和overflow:hidden可以帮助我将图像裁剪到所需的大小，唯一的问题是它总是图像的顶部。 - FljpFl0p

@FljpFl0p，如果你没能解决问题，可以试试这个jsfiddle :D - Zhenya Telegin

Answer 4

来自@Állan Fidelis Toledo的救星

在编写 CSS 样式时，使用 'contain' 作为 'object-fit' 的属性可以保持图像的纵横比。通过设置最大高度，在 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;
}

- KJS