用于提供容器图像大小的图像的CSS
用于提供容器图像大小的图像的CSS
提问于 2021-03-30 15:09:13
我有一个非常简单的html (图像比屏幕大得多)：
<body>
<script src="js/panzoom.min.js"></script>
<script src="js/app.js"></script>
<div class="parent">
<div id="image" class="image-container">
<img class="image" src="/bhBbJt6.jpg" alt="image" />
</div>
</div>
</body>我要那个
top)
- image-container
- no滚动条，无(白色)边框左或顶部有屏幕大小(默认为width=screensize，height=image大小)
- 父级100% (宽度和高度)--与body相同(晚些时候我可能会在
- 上添加一个元素)，
- img的图像大小(与图像容器相同)
f 212
没有任何CSS，宽度似乎总是屏幕宽度，但高度似乎是图像高度。为了限制身体和父母的屏幕高度，我添加了：
body,html {
margin: 0;
padding: 0;
max-height: 100vh;
overflow: hidden;
}
.parent {
max-height: inherit;
}在这里，我检查了我的前3点(不确定这是否可以以更好的方式实现，身高还是最大高度: 100%不工作在.parent上--不知道为什么)
但是，如何给图像容器和图像本身大小的图像？
编辑：
添加jsfiddle：https://jsfiddle.net/he0p6q4s/
如果您“检查”输出，您将看到图像容器具有大小：
我想要的宽度和高度总是一样的图片。在这种情况下，只有宽度是正确的。
回答 1
Stack Overflow用户
发布于 2021-03-30 16:42:59
使用给定的代码an，其图像的宽度大约是视口的10倍，img及其图像容器都给出了与图像宽度相等的宽度，即我不认为问题中所描述的问题。
问题可能在于用来找出宽度的代码。
如果对这些元素中的任何一个使用element.offsetWidth，则返回视图端口的宽度(设置为溢出:隐藏)。
为了获得整个img元素或它的容器的宽度(也就是滚动位)，使用element.scrollWidth可以给出img的自然宽度(与高度类似)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66873622
复制相关文章
相似问题
腾讯云开发者
