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

Question

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

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

如果它是肖像(400x600),那么它应该裁剪掉这部分图像(400x400):

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

谢谢,

Answer 1

@ FljpFl0p修复它[jsfiddle] [1]

[1]:https://www.bootply.com/92024此处还有另一个答案如何自动裁剪和居中图像.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;
}