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

概述我正在创建一个网站,我想根据图像的方向将图像裁剪为方形图像.我对CSS并不熟悉,所以我不确定如何解决这个问题. 如果它是风景图像(800×500),那么我希望裁剪的图像像这样(500×500)： 如果它是肖像(400×600),那么它应该裁剪出图像的这个部分(400×400)： 我该如何实现这一目标？最好是一种方法,我可以与Bootstrap的“img-responsive”一起使用,这样我就可以 我正在创建一个网站,我想根据图像的方向将图像裁剪为方形图像.我对CSS并不熟悉,所以我不确定如何解决这个问题.

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

如果它是肖像(400×600),那么它应该裁剪出图像的这个部分(400×400)：

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

谢谢,

解决方法 @ 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;}

总结

以上是内存溢出为你收集整理的HTML – Bootstrap – 如何裁剪图像的中心部分全部内容，希望文章能够帮你解决HTML – Bootstrap – 如何裁剪图像的中心部分所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。