是什么导致此网页上图像右侧的空白区域？答案

【问题标题】：What is causing the empty area to the right of the image on this web-page?是什么导致此网页上图像右侧的空白区域？
【发布时间】：2020-02-24 20:30:48
【问题描述】：

我正在尝试显示一个包含图像元素的 div 元素，并在图像太大或太大而无法在屏幕上显示时显示滚动条。这个 div 元素包含在一个用于水平居中其内容的父 div 中，除了已经提到的 div 和它的图像之外，还有另外两个 div 元素，一个在 image-div 的左侧，一个在右侧image-div 的。

但是，当图像不够宽时，图像右侧会显示一个空白区域。

我不想增加图像大小。当图像以小于 100% 的宽度显示时，我希望包含图像的 div 缩小以适合图像。当图像为 100% 或更大时，我希望父 div 增长，但不大于适合屏幕的大小。具体来说，我不希望图像变得太大以至于导致网页开始滚动到页面底部。

这是显示我在说什么的代码。

div {
  border: thin solid black;
  position: relative;
}

div:first-of-type { 
  display: inline-block;
  padding: 10px;
}

div:first-of-type > div { 
  padding: unset;
}

div:first-of-type > div:first-of-type {
  display: table;
  margin: 0 auto;
}

div:first-of-type > div:first-of-type > div { display: table-cell }

div:first-of-type > div:first-of-type > div:nth-of-type(2) {
  overflow: scroll;
  background-color: gray
}
div:first-of-type > div:first-of-type > div,
div:first-of-type > div:last-of-type > div {
  vertical-align: middle;
  padding: 0
}

img { width: 50%;
      min-width: 50px;
      min-height: 50px;
    }

<div>
  <div>
    <div><div><</div></div>
    <div>
      <img  src="https://townsquare.media/site/341/files/2012/11/tumblr_ls6ujhB6wV1qfq9oxo1_5001.jpg?w=980&amp;q=75">
    </div>
    <div><div>></div></div>
  </div>
</div>

这个问题的底部有两张图片，第一张是我在sn-p中运行代码时看到的，第二张是我想看到的代码产生的。请注意，第二张图片中的灰色区域消失了，包含图像和控件的框已缩小以适应内容并水平居中。

有人可以帮忙解决css或html代码吗？没有任何 javascript，可能也不需要。

顺便说一句，当这部分工作时，我将添加SpryMap插件，以允许用户在图像大于img元素的区域时滚动图像。但是，当图像的缩放级别低于 100% 时，我希望图像在控件之间居中显示，没有滚动条，除非图像导致发生溢出，全部为一行。

谢谢。

【问题讨论】：

代替溢出：滚动试试这个：溢出-x：隐藏和溢出-y：自动
感谢您的回复，但按照您的建议更改溢出滚动选项不会删除空白区域，它只会删除滚动条。右侧的 > 不向图像移动，并且图像和箭头不居中。
但是您在 css 定义中声明 img html 元素占据其容器 DIV 元素空间的 50%，因此 img 永远不会占据整个父空间。请重新考虑您的决定
感谢 AlanM，我再次查看了关于您的信息的编码，并提出了一种将 % 缩放值转换为 px 高度和宽度值的方法，然后将我的代码扩展到根据加载时的初始图像尺寸以及缩放级别更改时计算的高度和宽度管理滚动条，这与 Buttered_Toast 建议一致。再次感谢。

标签： html css image viewer

【解决方案1】：

请参阅这个解决空白空间问题的CodePen 示例。解决方案解决了图像右侧和图像右侧垂直滚动条之间的间隙，但这只是一个真正的问题，因为溢出/溢出-y 设置为滚动而不是自动/隐藏。该间隙还可以防止 > 右箭头指向图像的右侧以及图像和周围控件的正确水平居中。当图像的高度/宽度被分配像素值而不是 % 值时，这些问题就得到了解决。

        function inputChange( This ) {
          if( This.checkValidity() ) {
            var img       = document.querySelector( 'img' );
            var div       = img.parentElement;
            var liveStyle = window.getComputedStyle( div );
            var maxHeight = parseInt( liveStyle.getPropertyValue( 'max-height' ) );
            var maxWidth  = parseInt( liveStyle.getPropertyValue( 'max-width' ) );
            var v         = ~~This.value;
            var h         = ( img.naturalHeight * v ) / 100;
            var w         = ( img.naturalWidth  * v ) / 100;

            div.style.height =
            img.style.height = h + 'px';
            div.style.width  =
            img.style.width  = w + 'px';

            div.style.overflowX = ( ( w <= maxWidth  ) ? 'hidden' : 'scroll' );
            div.style.overflowY = ( ( h <= maxHeight ) ? 'hidden' : 'scroll' );

          }
        }

【讨论】：