[英]CSS : Object Cover doesn't center an image
我正在尝试创建一个缩略图网格,主要用于移动设备。
图片大小未知:来自一个Input,大小取决于手机上的摄像头。 所以我事先不知道照片是横向还是纵向。 因此,两个缩略图的样式应该相同。
对于横向图像,我希望它显示为全高并水平居中。 对于纵向图像,我想显示图像的整个宽度并垂直居中。
LANDSCAPE IMAGE PORTRAIT IMAGE
+++++++
+ +
+ +
++++++=======++++++ =======
+ ======= + =======
+ ======= + =======
+ ======= + =======
+ ======= + =======
++++++=======++++++ =======
+ +
+ +
+++++++
== = actual thumbnail = part of the full image that will be shown
+ = full image size
我猜object-fit: cover;
将是最合适的。
这适用于风景图像(见codepen:右边的男人不是showw,这是预期的)
不幸的是,这不适用于肖像图像。 宽度正确缩放为拇指的宽度,但图像未垂直居中。 (见codepen:建筑物的顶部仍然可见,而前面的人消失了。我所期望的是建筑物的顶部不再可见,而头部则完全可见。我可以通过翻译来解决这个问题,但是那么相同的代码将不适用于肖像。
请参阅 codepen,使用 Tailwind https://codepen.io/pasdut/pen/MWbzvzX
更新:我事先不知道图像是纵向还是横向
我没有使用 Tailwind,所以我只会给你有效的代码。
.portrait {
height: 100% !important;
min-width: 100%;
object-fit: cover;
}
在您的第二张图片中删除其中的任何内容并使用“肖像”class。 如果它是您想要的效果,它实际上也适用于第一张图像。
如果您给纵向图像height: 100%
,它将在与object-fit: cover
配对的容器中水平和垂直居中图像。 您只需将h-full
tailwind class 添加到缩略图 #2 <img>
元素,因为它的height: 100%
。 看看正在运行的CodePen 演示。
<img class="object-cover min-w-full min-h-full h-full"
src="https://dummyimage.com/400x900/472647/ffff00&text=portrait+image">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.