CSS:对象覆盖不使图像居中

Posted

技术标签:

【中文标题】CSS:对象覆盖不使图像居中【英文标题】:CSS : Object Cover doesn't center an image 【发布时间】:2021-06-07 22:18:48 【问题描述】:

我正在尝试创建一个缩略图网格,主要用于移动设备。

图片大小未知:来自一个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

更新:我事先不知道图像是纵向还是横向

【问题讨论】:

【参考方案1】:

如果您提供肖像图像height: 100%,它将在与object-fit: cover 配对的容器中水平和垂直居中图像。您只需将h-full tailwind 类添加到缩略图#2 <img> 元素,因为它有height: 100%。看看工作的CodePen demo。

<img class="object-cover min-w-full min-h-full h-full" 
  src="https://dummyimage.com/400x900/472647/ffff00&text=portrait+image">

【讨论】:

嗨坦纳,感谢您的回答。这似乎也适用于风景图像。我已将真实图像添加到工作 codepen codepen.io/pasdut/pen/GRNwXzq?editors=1010 虽然这个答案是正确的,但这并不总是适用于 Chrome。见***.com/questions/62825499/…。将在 chrome 89 中修复? @Pasduti 是的,我已经阅读了 Chromium 中的 object-fit 浏览器错误。在 Chrome 团队修复错误之前,我们无能为力。【参考方案2】:

我没有使用 Tailwind,所以我只想给你有效的代码。

.portrait 
    height: 100% !important;
    min-width: 100%;
    object-fit: cover;

在您的第二张图片中删除其中的任何内容并使用“肖像”类。如果它是您想要的效果,它实际上也适用于第一张图像。

【讨论】:

HI Co Pham。感谢您的回答。这似乎成功了:见codepen.io/pasdut/pen/RwoqYQN

以上是关于CSS:对象覆盖不使图像居中的主要内容,如果未能解决你的问题,请参考以下文章

居中图像而文本覆盖画布(左和右)

React JS:图像大小在重新加载时闪烁,对象匹配:覆盖 CSS 属性

带图标的引导图像悬停覆盖

如何在不使其全屏的情况下删除颤振闪屏状态栏的颜色覆盖?

Flex justify-content:居中覆盖

如何在fabric js中使用image.centerObject()使对象居中后获取图像坐标