提供容器图像大小的图像的 CSS答案

【问题标题】：CSS for image that give container image size提供容器图像大小的图像的 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>

我想要那个

无滚动条，左侧或顶部无（白色）边框
body 有屏幕尺寸（默认看起来 width=screensize，height=image size）
parent 100%（宽度和高度） - 与 body 相同（后期我可能会在顶部添加一个元素）
image-container 应该有图片的大小（高度和宽度）
img 具有图像大小（与图像容器相同）

如果没有任何 CSS，宽度似乎总是屏幕宽度，但高度似乎是图像高度。为了将正文和父级限制为屏幕高度，我添加了：

body,html {
    margin: 0;
    padding: 0;
    max-height: 100vh;
    overflow: hidden; 
}
.parent {
    max-height: inherit;
 }

有了这个，我检查了我的前 3 点（不确定这是否可以通过更好的方式实现，高度或最大高度：100% 不适用于 .parent - 不知道为什么）

但是如何给 image-container 和图片本身的图片大小呢？

编辑：

添加 jsfiddle：https://jsfiddle.net/he0p6q4s/

如果你“检查”输出，你会看到图像容器有大小：

我希望宽度和高度始终与图片相同。在这种情况下，只有宽度是正确的。

【问题讨论】：

标签： html css

【解决方案1】：

使用给定的代码 an 图像比视口宽大约 10 倍，img 及其图像容器都给出等于图像宽度的宽度，即我没有看到问题中描述的问题问题。

问题可能在于用于找出宽度的代码。

如果您在其中任何一个元素上使用element.offsetWidth，它会返回视口的宽度（设置为溢出：隐藏）。

使用element.scrollWidth 获取整个img 元素或其容器的宽度（也就是滚动出来的位）给出了img 的自然宽度（高度也类似）。

【讨论】：

编辑我的问题更清楚。图像容器的宽度正确但高度不正确。
啊，谢谢，我读到你想找到完整的高度和宽度 - 可滚动位等等。