我正在尝试制作一个具有图像背景的画布，该画布填充整个屏幕而不拉伸背景图像。为此，我认为最好的方法是从带有“object-fit”的普通 img 元素开始，使其填充屏幕而不拉伸，然后我可以将 img 元素的相同宽度/高度应用于画布元素并使canvas元素替换img。这也有助于加快页面加载速度，因为我不必在页面加载后等待图像加载，因为图像是在页面加载时加载的。然而，虽然 object-fit 对非 img 元素按预期工作，但似乎对于 img 元素它缩放元素的内容而不是元素本身的含义，当我尝试获取图像的尺寸时，我只是得到整个窗口的尺寸。我在下面的代码中展示了这一点；如果您打开检查元素，您可以看到 img 元素在整个屏幕上延伸。

我有一个画布，用于object-fit: contain在不改变纵横比的情况下使内容尽可能大。但是，我想在画布之上和相对于画布显示其他元素。我计划通过将画布和其他元素放入position: relative容器并提供其他元素来做到这一点position: absolute。但是，这会导致画布显示不大于默认宽度/高度（通常小于视口）。我还尝试为容器提供 100% 的宽度和高度，但其他元素不再与画布内容相关。下面是一个例子：

例如，这里https://cs.daihatsu-club.net/vozidlo/daihatsu-materia-8当我在 Chrome 开发者工具中将 Network throttling 设置为 Slow 3G 时，您可以通过填写为 IMG 保留 300x200px，但代价是不保持纵横比（失真），并且仅在一段时间后才显示裁剪，这要归功于“object-fit:cover;”。您可以在这个几秒钟的 YouTube 视频中看到糟糕的图像跳跃效果https://youtu.be/CF3EB3CxHY4

知道如何在保持图像被 CSS“object-fit:cover”裁剪的同时防止它吗？

在此处输入图像描述

先决条件

适合对象：封面；我设置为主视觉不起作用！

这是生产中网站的屏幕截图。

期望值

我想将主视觉设置为如下链接中的外观。 https://code-step.com/demo/html/profile/

繁殖程序

请运行下面的代码。

我有这个简单的 html 显示图像。

https://jsbin.com/hapoqog/edit?html，输出

img 元素具有不同的属性：width,height,offsetWidth,offsetHeight,naturalWidth,naturalHeight但它们都不能正确给出渲染图像的尺寸。

如何计算渲染图像的宽度、高度和比例/缩放？

所以我有一个网格布局的页面，中间有一个页眉和一个页脚以及一个黑色的内容容器。

到目前为止，一切都很好。

现在我想放一个可以拉伸以适应这个容器（并居中）的视频。这是尝试object-fit: contain;

但它不起作用。容器扩展以适应视频，而不是使视频适合容器。

如何将容器保持在其固有尺寸并使视频适合其容器？

我有一个容器元素（屏幕截图上的巧克力色），其中包含一个 3x2 的瓷砖网格。瓷砖包含具有 16/9 分辨率图像和一些页眉和页脚的图像元素。瓷砖跨度可以是 1-3，中间有 4px 的间隙。图像设置为 object-fit:contain，容器元素（屏幕截图上的巧克力色）占用父级（灰色）的 100% 宽度和高度，这导致图像平铺比例与图像比例不匹配，并且图像周围有条（图片上的蓝色水色）。我需要缩放容器元素（巧克力色），所以它的内容将获得这样的尺寸，图像元素将完全适合。

这是堆栈闪电战。我尝试使用图像父级的纵横比，它适用于中等大小的分辨率，但不适用于小或大，然后图像再次获得水色条。

为简化起见，stackblitz 仅包含一个图像元素拼贴，它应该完全适合巧克力元素。您可以忽略图像内的网格。

https://stackblitz.com/edit/angular-ivy-xu92pf?file=src/app/app.component.css

当前（巧克力容器从父容器中获取 100% 的宽度和高度）：

预期（巧克力容器具有宽度和高度比例，因此其图像内容 16/9 将完美契合。在现实世界中，图像内容不会固定 w/h 比例）：

我目前正在我的博客上工作，我正在尝试将所有图像调整为 1:1 的比例，这对于高度大于宽度的图像非常有用。另一方面，它也适用于宽度较大的图像。但我遇到的主要问题是宽度较大的图像不需要符合 1:1 的比例，因为这样可以更好地对齐下面的描述。

我怎样才能解决这个问题？（请在下面找到我的代码）：

CSS：

HTML：

先感谢您！

谁能解释为什么一些运行 safari 的 iphone 在图像顶部有额外的空间？

我在这里包含了一个示例项目：
https ://jsfiddle.net/3wL9m6qf/16/

一切都按预期加载和工作，但是safari 上的一些 iPhone 在图像上方显示了一些额外的空间。（请参阅图像顶部的石板灰色背景）

我已经尝试在跨浏览器测试工具上运行该网站，但它们都没有显示这个问题（至少在我开始使用时）。检查的浏览器：

• 镀铬窗户 - 没问题
• chrome android - 没问题
• ecosia android - 没问题
• firefow windows - 没问题
• safari ios 测试工具-没问题
• 苹果手机 ？？？野生动物园 - 额外的空间

请检查我包含的 jsfiddle 以了解我如何处理图像缩放。但长话短说，我使用：

• 图像容器 > 边距和填充 = 0；高度= 100%；
• 图像 > 边距和填充 = 0；高度= 100%；最大高度 = 300 像素；背景尺寸：100%；背景尺寸：封面；适合对象：包含；

我试图找到有同样问题的人，但只发现了水平空间的问题。这些似乎都不适用于我的问题。