javascript - object-fit 改变图像的宽度,但不改变元素。如何在 JS 中获取图像的宽度?
问题描述
我正在尝试制作一个具有图像背景的画布,该画布填充整个屏幕而不拉伸背景图像。为此,我认为最好的方法是从带有“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>
解决方案
推荐阅读
- iis - IIS Url Rewrite 添加 Index.php 到
- firebase - 上传前 Flutter 离线图片
- vue.js - 单击链接时从 Velocity animate 获取 id 值
- javascript - Vuetify - 将列表中的项目一直向下移动
- ios - 纯SwiftUI登录、注册、注册流程,可以吗?
- r - igraph ggplot rStudio 如何使节点之间的线更长并添加箭头?另外我怎样才能使图例变小?
- parallel-processing - Flink CPU 配置
- javascript - NoSuchSessionError:无效的会话 id,用于循环 WebElements 的硒测试
- json - 使用 GitHub api 在 git 树中提交图像
- winforms - Windows 窗体“部署任务”失败并显示“该进程无法访问该文件,因为它正被另一个进程使用。” 在 .NET5 中