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

Question

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

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

如果它是纵向 (400x600)，那么它应该裁剪掉图像的这一部分 (400x400):

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

谢谢，

Answer 1

@FljpFl0p 修复它 [jsfiddle][1]

[1]: https://www.bootply.com/92024这里还有另一个答案 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;
}