HTML

Question

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

如果是风景图片 (800x500) 那么我希望裁剪后的图片是这样的 (500x500):

如果是纵向 (400x600)，则应该裁剪掉图像的这一部分 (400x400)：

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

谢谢，

Answer 1

添加 class img-responsive 到 img 标签，这将缩放您的图像并保持宽/高比。如果您对结果不满意，我会尝试使用 Javascript.

Answer 2

@FljpFl0p 修复它 [jsfiddle][1]

[1]: https://www.bootply.com/92024 and there is another answer here How to automatically crop and center an image。谢谢！

如果您希望它响应并使用 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 3

不确定您是否仅限于 CSS 方法，但是 JavaScript 方法可以帮助获取图像的尺寸并将其包装在 div 中 overflow:hidden.

$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' 来保持图像的纵横比。通过设置最大高度，它在 Bootstrap 4 中也很有用。适用于 Bootstrap 中的所有 'col' 类 4.

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

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

HTML - Bootstrap - How to crop the center part of an image

css

image

crop

twitter-bootstrap-3