可滚动分区中 100% 的 CSS 图像，可扩展以填充可用空间

Question

此代码以 100% 显示图像。图像太大，无法在将插入此代码的空间中 100% 显示，因此我需要使用滚动条显示它们。

<div style="overflow: auto; margin: auto; margin-bottom: 1em;">
<img src="">
</div>

此代码显示 100% 的图像，滚动条在 500 像素 x 500 像素的范围内。我不;但是，外部分区需要固定大小。

<div style="width: 500px; height: 500px; overflow: auto; margin: auto; margin-bottom: 1em;">
<img src="">
</div>

我想调整外部分区以充当图片查看器，以查看带有滚动条的全尺寸图像。

1. 我希望外部分区填充可用的水平空间，我不知道并且会根据查看者的显示器而改变。高度应该自动调整，但不会填满可用空间，因为会有一系列这样的图片查看器分区垂直堆叠。

2. 我要插入的图片很大，99.9% 的时间会超出可用空间，因此我需要滚动条。

3. 我不希望将图片调整为外部分区的大小，反之亦然。

4. 我无法使用任何脚本或活动内容。只能是纯css和html。

5. 我无法对图像的像素大小进行硬编码，因为应用程序将通过循环插入图像代码，并且应用程序无法插入图像的宽度或大小。

   李>

Answer 1

将外包装保持在width: 100% 并计算出适合您用例的高度。

为了响应性，我认为根据viewport units 选择高度更适合您，这样它就不会填充或拉伸超出可用高度（我这里以 50vh 为例）

也许this 也能帮到你。

以下片段：

body{
  margin: 0;
}
*{
  box-sizing: border-box;
}
.wrapper{
  overflow: auto;
  border: 1px solid;
  width: 100%;
  height: 50vh; /* adjust / omit this as per your requirement*/
}
.wrapper img{
  display: block;
}

<div class="wrapper">
  <img src="http://placehold.it/1500x1500">
</div>

Answer 2

我认为您可以使用 iframe 或使用 100% 宽度的 overflow: scroll 来执行此操作。这是你需要弄清楚的高度。我建议使用媒体查询来获取高度。

这是一个示例 jsfiddle，我认为它与您正在寻找的内容非常接近。同样，你的身高是你必须弄清楚的。除非您指定，否则父 div 将始终占据子 div 的全部高度。

.image-wrapper {
    width: 100%;
    height: 50vh; /* as suggested below in another answer, or you can use media queries */
    overflow: scroll;
}

<div class="image-wrapper">
    <img src="http://www.spyderonlines.com/images/wallpapers/image/image-20.png">
</div>

https://jsfiddle.net/adpro/bt7aar4b/