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

Question

我正在尝试显示一个 div 元素，该元素包含图像元素并在图像太大或变得太大而无法显示在屏幕上时显示滚动条。此 div 元素包含在用于水平居中其内容的父 div 中，除了已经提到的 div 及其图像之外，还有另外两个 div 元素, 一个在图片的左边-div 一个在图片的右边-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>

这个问题的底部有两张图片，第一张是我在运行代码片段中看到的，第二张是我想看到的代码生成的。请注意，第二张图片中的灰色区域消失了，包含图像和控件的框有 sh运行k 以适合内容并水平居中。

有人可以帮助 css 或 html 代码吗？没有 javascript，而且可能不需要。

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

谢谢。

Answer 1

请参阅此 CodePen 解决空 space 问题的示例。解决方案解决了图像右侧和图像右侧的垂直滚动条之间的间隙，但这只是一个真正的问题，因为 overflow/overflow-y 设置为滚动而不是 auto/hidden。该间隙还可以防止 > 向右箭头位于图像的右侧以及图像和周围控件的正确水平居中。当为图像的 height/width 分配像素值而不是 % 值时，这些问题就解决了。

        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' );

          }
        }

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

What is causing the empty area to the right of the image on this web-page?

html

css

image

viewer