0

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

* {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

div {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
<div>
  <img src="https://via.placeholder.com/150">
</div>
是否有类似于 object-fit 的东西来缩放元素本身或获取 img 元素内容宽度的方法？

4

0 回答 0