Блог

Главная - Вопросы по программированию - Горизонтальная прокрутка изображения с изменением размера изображения по высоте показывает пустое пространство

Горизонтальная прокрутка изображения с изменением размера изображения по высоте показывает пустое пространство

#html #css #firefox #flexbox

#HTML #css #firefox #flexbox

Вопрос:

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

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

Текущий CSS работает в Chrome, а иногда и в Safari, но никогда в Firefox.

В примере немного больше элементов, чем просто вид прокрутки, учитывая, что могут быть инструкции CSS от родительских divs, которые влияют на вид прокрутки.

JSFiddle

 .window {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}

.rootReset {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--color-bg);
  border-radius: var(--border-radius);
  width: 45rem;
}

.mainContainer {
  position: relative;
  height: 30rem;
  overflow: none;
}

.viewContainer {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: left;
  align-items: top;
  height: 100%;
}

.leftPanel {
  background-color: red;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 35%;
  justify-content: left;
  align-items: left;
  min-width: 200px;
  overflow: none;
}

.rightPanel {
  flex: 1 1 65%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.header {
  background-color: gray;
  height: 2rem;
}

.viewContainer-content {
  margin: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.box {
  display: flex;
  flex: 1;
  overflow-x: auto;
}

.box > * {
  margin-left: 0.6rem;
}

.box > :first-child {
  margin-left: 0rem;
}

.item {
  height: 100%;
  display: block;
  position: relative;
  flex: 1;
}

img {
  object-fit: contain;
  max-height: 100%;
  max-width: none;
  display: block;
}

.overlayText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
  font-weight: bold;
  font-size: x-large;
}

.lowerBlock {
  background-color: blue;
  height: 50px;
}  
 <div class='window'>
  <div class='rootReset'>
    <div>
      <div class='mainContainer'>
        <div class='viewContainer'>
          <div class='leftPanel'></div>
          <div class='rightPanel'>
            <div class='header'></div>
            <div class='viewContainer-content'>
              <div class='container'>
                <h2>TEST</h2>

                  <div class='box'>
                    <div class='item'>
                      <img src='https://picsum.photos/2000/3000' />
                      <div class='overlayText'>img 1</div>
                    </div>
                    <div class='item'>
                      <img src='https://loremflickr.com/1080/1920' />
                      <div class='overlayText'>img 2</div>
                    </div>
                    <div class='item'>
                      <img src='https://picsum.photos/2000/3000' />
                      <div class='overlayText'>img 3</div>
                    </div>
                    <div class='item'>
                      <img src='https://loremflickr.com/1080/1920' />
                      <div class='overlayText'>img 4</div>
                    </div>
                  </div>

                <div class='lowerBlock'></div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

Редактировать

Вот изображение того, как это должно выглядеть желаемый рендеринг

Обновление 11/02/2020

Приведенный выше код работает, если .box div устанавливает определенную высоту.

Упрощенная скрипка, которая показывает гибкую компоновку, работает, когда поле имеет значение.

Эта скрипка воспроизводит ошибку макета в Firefox. Родительский div задает высоту и ширину.

Ответ №1:

Не уверен, что я полностью понимаю, чего вы хотели бы достичь. Но должно ли это действовать больше так?:

 .window {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}

.rootReset {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--color-bg);
  border-radius: var(--border-radius);
  width: 45rem;
}

.mainContainer {
  position: relative;
  height: 30rem;
  overflow: none;
}

.viewContainer {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: left;
  align-items: top;
  height: 100%;
}

.leftPanel {
  background-color: red;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 35%;
  justify-content: left;
  align-items: left;
  min-width: 200px;
  overflow: none;
}

.rightPanel {
  flex: 1 1 65%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.header {
  background-color: gray;
  height: 2rem;
}

.viewContainer-content {
  margin: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.box {
  display: flex;
  flex: 1;
  overflow-x: auto;
}

.box > * {
  margin-left: 0.6rem;
}

.box > :first-child {
  margin-left: 0rem;
}

.item {
    height: 100%;
    display: flex;
    position: relative;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

img {
    max-height: 100%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.overlayText {
  color: red;
  font-weight: bold;
  font-size: x-large;
  z-index: 1;
  padding: 10px;
}

.lowerBlock {
  background-color: blue;
  height: 50px;
}  
 <div class='window'>
  <div class='rootReset'>
    <div>
      <div class='mainContainer'>
        <div class='viewContainer'>
          <div class='leftPanel'></div>
          <div class='rightPanel'>
            <div class='header'></div>
            <div class='viewContainer-content'>
              <div class='container'>
                <h2>TEST</h2>

                  <div class='box'>
                    <div class='item'>
                      <img src='https://picsum.photos/2000/3000' />
                      <div class='overlayText'>Longer text!!</div>
                    </div>
                    <div class='item'>
                      <img src='https://loremflickr.com/1080/1920' />
                      <div class='overlayText'>img 2</div>
                    </div>
                    <div class='item'>
                      <img src='https://picsum.photos/2000/3000' />
                      <div class='overlayText'>img 3</div>
                    </div>
                    <div class='item'>
                      <img src='https://loremflickr.com/1080/1920' />
                      <div class='overlayText'>img 4</div>
                    </div>
                  </div>

                <div class='lowerBlock'></div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

Комментарии:

1. Почти! Я все еще хочу сохранить соотношение сторон изображения и прокрутку. Я добавил скриншот того, как мой код отображает Chrome; вот как я хочу, чтобы это выглядело во всех браузерах.