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

Posted 2023-03-05

【中文标题】水平图像滚动，图像大小调整以适合高度显示空白空间

【英文标题】：Horizontal Image Scroll with image resizing to fit height shows blank space

【发布时间】：2021-01-31 04:17:02

【问题描述】：

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

我面临的问题是每个包含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 正在设置高度和宽度。

【参考方案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>

【讨论】：

几乎！我仍然想保留图像纵横比和滚动。我添加了我的代码如何渲染 Chrome 的屏幕截图；这就是我希望它在所有浏览器上的外观。