HTML – Bootstrap – 如何裁剪图像的中心部分
发布时间:2020-12-14 18:34:45 所属栏目:资源 来源:网络整理
导读:我正在创建一个网站,我想根据图像的方向将图像裁剪为方形图像.我对CSS并不熟悉,所以我不确定如何解决这个问题. 如果它是风景图像(800×500),那么我希望裁剪的图像像这样(500×500): 如果它是肖像(400×600),那么它应该裁剪出图像的这个部分(400×400): 我
我正在创建一个网站,我想根据图像的方向将图像裁剪为方形图像.我对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; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |