Что вызывает пустую область справа от изображения на этой веб-странице? - PullRequest
Новая
       142

Что вызывает пустую область справа от изображения на этой веб-странице?

0 голосов
/ 23 февраля 2020

Я пытаюсь отобразить элемент div, который содержит элемент изображения и показывает полосы прокрутки, когда изображение либо становится слишком большим, чтобы уместиться на экране. Этот элемент div содержится в родительском div, который используется для горизонтального центрирования его содержимого, которое, помимо уже упомянутого div и его изображения, представляет собой два других элемента div, один на левой стороне изображения div и один на правой стороне of image-div.

Однако, когда изображение недостаточно широкое, с правой стороны изображения отображается пустая область.

Я не хочу увеличивать размер изображения. Я хочу, чтобы div, который включает изображение, уменьшался, чтобы соответствовать изображению, когда изображение отображается с шириной менее 100%. Когда изображение на 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>

В нижней части этого вопроса находятся две картинки: первая - это то, что я вижу, когда запускаю код во фрагменте, а вторая - то, что я хочу увидеть код производства. Обратите внимание, что серая область исчезла на втором изображении, а поле, содержащее изображение и элементы управления, сжалось, чтобы соответствовать контенту, и отцентрировано по горизонтали.

Может кто-нибудь помочь с кодом css или html , Там нет никаких javascript, и, вероятно, не должно быть никаких.

what I see

what I'd like see

Кстати, когда эта часть работает, я собираюсь добавить плагин SpryMap, чтобы позволить пользователю прокручивать изображение, когда оно больше, чем область элемента img. Однако, когда уровень масштабирования изображения ниже 100%, я хочу, чтобы изображение отображалось по центру на экране между элементами управления <и>, без полос прокрутки, если только изображение не вызывает переполнение, все на одной строке.

Спасибо.

1 Ответ

0 голосов
/ 24 февраля 2020

Пожалуйста, посмотрите этот 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' );

          }
        }
...