问题标签 [object-fit]

基本上，我想要实现的是一个覆盖整个窗口的弹出窗口，并具有一个居中的图像，该图像延伸到最大高度或宽度（取决于图像尺寸）并保持纵横比。完整的图像应该仍然可见。当您单击剩余的可见父级蓝色背景时，父级和图像都应该消失。

父事件未触发。但是如果我删除 CSS 代码，事件就会触发。这里发生了什么？

所以我需要这个图像的比例可以说是 100vh 上的 2880x1520。

我可以使用 object-fit:cover; 对象位置：左中；

它工作正常。

问题是我还必须在图像的特定部分放置按钮，并且图像当然会根据浏览器的比例调整大小。

因此，我很难弄清楚按钮遵循 object-fit:cover 所暗示的图像大小调整的规则是什么，因此按钮将始终位于该特定图像部分的顶部并遵循图像调整大小.

它可能是 vh 和 vw 的组合，但我无法真正弄清楚这里的确切规则是什么。

提前感谢您的想法！

我注意到了一个小问题。object-fit:cover 似乎不适用于 Safari Mobile。有什么解决方法吗？如果您可以在图像中看到，则背景图像正在从容器中泄漏出来。

下面是我的代码片段：

根据维基百科https://commons.wikimedia.org/wiki/File:Standard_web_banner_ad_sizes.svg ，横幅 div (className content-area-container) 是一个 3:1 的 300x100 尺寸矩形

但是，它使用vw单位，因此它会随着网页视口的最大化或最小化而按比例增长和缩小

div 必须包含 1 个徽标图像。徽标图像具有各种尺寸和纵横比。大多数是长方形的，有些是正方形的，而有些很宽或很高

我的问题是你如何在 div 的中心放置图像标志，填充它并尽可能多地显示而不影响纵横比？

图片 logo 不能与下面的文字和内容重叠，并且不能超过横幅 div 的最大高度，否则父 div 会溢出

我的 css 和 html 没有使图像徽标适合，而是仍保持原始大小

我使用 flex 创建了一个图片库。图像是调整每个图像宽度的列，以便画廊适合 flex 容器的宽度。当用户将鼠标悬停在图库中的图像上时，图像会增长并显示其完整大小。

图像被设置为 object-fit:cover 和 object-position: center top，因为这可以防止图像缩放以适应 flex 容器的高度，并且图像的顶部在悬停时显示。

但是，如果图像有垂直溢出，我希望用户能够在图像展开后滚动图像的高度。

有没有人遇到过这种情况，你对我应该做些什么来实现这个目标有什么建议吗？

我的 HTML 和 CSS 如下：

创建图片库

.portfolio_gallery 是 flex 与我的包装器的宽度

.portfolio_columns 也是 flex

当用户将鼠标悬停在图像上时，它会增长以显示整个图像

画廊内的图像 (.portfolio_image) 设置为 object-fit: cover with object-position: center top

只是一个适合对象的提示：Cover；在最新的 Chrome 更新中不再工作异常。（版本 92.0.4515.107（官方构建）（64 位），我不确定这是否是错误！

我实际上只是花了一个小时试图弄清楚在开发网站时是否有任何文件发生了变化，因为使用该 CSS 规则的滑块不再正常工作，所以我在另一台装有 Chrome 的 PC 上尝试了它，它运行良好直到我通过设置更新。我已经提交了一份错误报告以防万一。

编辑：虽然在 CSS 规则的新更新中确实发生了一些变化，例如：在引导 4.6 轮播中，我被迫使用一些额外的 CSS 规则，因此它的行为不像在 IE 中那样。基本上我有一个全宽轮播，第一张幻灯片是视频，还有几个带有按钮的图像等，它们在除 IE 之外的所有浏览器中都能完美运行，添加下面的代码修复了它。

我正在尝试以“灯箱”样式显示图像，以便它将填充屏幕上的可用区域，在本例中为页面宽度的 90% 和高度的 70%。

使用object-fit: contain;似乎是事实上的方法，但它并不完全适用于border-radius. 是否可以在 an 上使用 object-fit<img>并且仍然按预期应用边框半径？

您需要调整浏览器窗口的大小以查看运行以下代码段时会发生什么。根据下面的视频，我在 JSFiddle 中运行了相同的代码。

在鼠标悬停时，当 img 不使用 object-fit 时，img 下方的动画跨度标签可以正常工作：包含如下：

但是当 img 使用 object-fit: 时，包含动画的 span 占据了整个区域：

使用 object-fit: contains 时，如何使这些悬停效果仅适用于图像周围的区域（而不是整个区域）？图像必须使用 object-fit 保持垂直居中。

这可能是一个初学者的问题，但我似乎无法弄清楚。

HTML：

CSS：

在#picBox 中，我有 2 个项目，一个带有 object-fit 属性的图像（#bigPic）和一个带有 2 个文本项（#overlay）的 div 的 div。我想在图像上叠加。#picBox 底部的叠加高度为 20%，#olText 中的 2 个文本项需要按 css 显示排列。如果我使用绝对位置和相对位置，它会弄乱对象拟合。那么我怎样才能按照我的预期进行这项工作呢？

这里我有div一个 class="container"，里面div有一个img，我希望图像覆盖所有父 div，无论它是什么大小，我还希望图像保持其纵横比，最重要的是也就是说，如果另一个值（宽度、高度）更大，则宽度或高度都应为 100%。

如果图像是 2:1 纵横比，则高度应为 100% 以覆盖所有 div 并关闭所有间隙。

希望你能理解我，谢谢