CSS: горизонтальная прокрутка изображения внутри переменной ширины div?

Question

у меня есть ...

<div id="tabs">
  <!-- ... -->
  <div id="interior-photo">
    <img src="...">
  </div>
  <!-- ... -->
</div>

... и ...

#interior-photo { overflow-x: auto; }

По сути, у меня страница разбита на основной раздел и правую боковую панель фиксированной ширины. В основном разделе у меня есть вкладка div. Вся страница увеличивается с шириной окна, поэтому при изменении размера окна размер div с вкладками также увеличивается по горизонтали.

Моя проблема в том, что изображение, которое я загружаю внутри одного из div с вкладками, как правило, намного, намного шире, чем обычно окно (это панорамные изображения; очень длинные по горизонтали, но не сильно по вертикали).

Я знаю, что могу заставить содержимое #interior-photo прокручивать по горизонтали, используя приведенное выше правило CSS, но, похоже, это работает только тогда, когда этот же div имеет фиксированную ширину . Поскольку я хочу, чтобы этот div имел переменную ширину , он всегда отображает полную ширину изображения, что выводит мой макет из строя.

Я знаю, как это исправить с помощью Javascript, но мне было интересно, есть ли у кого-нибудь решение только для CSS. Если вам нужна дополнительная информация о моем макете для решения этой проблемы, пожалуйста, дайте мне знать. Спасибо!

Answer 1

Если ваш целевой div не ограничен либо стилем фиксированной ширины , либо контейнером с фиксированной шириной или чьи предки включают фиксированную ширину, вы не сможете получить целевой целевой div для получения скроллбары. Он будет настолько же широким, как и его содержимое, и полосы прокрутки браузера возьмут верх.

Answer 2

На самом деле, есть способ обойти это. Вы можете указать отображение изображения с помощью полос прокрутки и, таким образом, ограничить видимую часть размером div. По сути, изображение будет расширяться до размера div, а затем иметь горизонтальную полосу прокрутки, если размер изображения по горизонтали превышает горизонтальный размер div. Полосы прокрутки не будут отображаться, если вертикальный компонент изображения превышает div. Вы можете установить x и y для прокрутки при переполнении с помощью объявления overflow. Однако для использования любого из них размер div должен контролироваться с помощью некоторых средств, даже с помощью первоначального объявления.

#interior-photo { overflow-x: scroll; }