水平图像滚动，图像大小调整以适合高度显示空白空间

Question

我有一个水平图像滚动视图，它会根据给定的内容高度自动调整大小。在每张图片的顶部，都有一个叠加层。

我面临的问题是每个包含image 和overlayText 的box 具有等于实际图像分辨率的计算宽度。这会导致图像右侧出现大量空白。

当前的 CSS 适用于 Chrome，有时适用于 Safari，但从不适用于 Firefox。

这个例子有比滚动视图更多的元素，因为可能有来自父 div 的 CSS 指令会影响滚动视图。

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>

编辑

这是一张应该是什么样子的图片

2020 年 11 月 2 日更新

如果.box div 设置了特定的高度，则上面的代码有效。

当 box 有值时，simplified fiddle 显示 flex 布局正在工作。

This fiddle 正在重现 Firefox 中的布局错误。父 div 正在设置高度和宽度。

Answer 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>