如何使用 flexbox 制作具有灵活内容（标题、图像和描述）的灯箱？

Question

我创建了一个基于 Bootstrap 的网络应用程序，并尝试向其中添加一个灯箱。我已经寻找了各种插件，但遗憾的是没有一个能满足我的要求。

我的灯箱有两个主要部分让我非常难以抗拒：顶部的图像和底部带有标题和说明的文本。

我面临的问题是，我希望灯箱限制内容的大小，这意味着，如果整个内容大于 100% vh 或 vw，它应该缩小它。而且因为这对文本来说很难做到，所以需要对图像进行缩放。但是无论我做什么，我都无法使图像具有可伸缩性。

这是我目前所拥有的：

HTML

<div id="agp-lightbox" class="agp-lightbox" @click="$emit('close')">
  <div class="lightbox-content" :key="this.index">

    <div class="content-left">
      <a class="prev" @click.stop="prev" v-show="hasPrev()"><span class="fa fa-chevron-left"></span></a>
    </div>

    <div class="content-middle">

      <div class="close cursor fa fa-window-close" @click="$emit('close')"></div>
      <div class="numbertext">{{this.index+1}}/{{this.amount}}</div>

      <div class="img-box">
        <img v-bind:src="this.imglink">
      </div>

      <div class="caption-container">
        <h3>{{this.info.title}}</h3>
        <span v-html="this.info.description_de"></span>
        <p>
          Material: {{this.info.material_de}},
          Preis: {{this.info.price}},
          Format: {{this.info.artwork_format}}
        </p>
      </div>

    </div>

    <div class="content-right">
      <a class="next" @click.stop="next" v-show="hasNext()"><span class="fa fa-chevron-right"></span></a>
    </div>

  </div>
</div>

CSS

.agp-lightbox {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        min-width: 0;
        min-height: 0;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .lightbox-content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 20px;
        height: 90%;
        width: 90%;
        min-width: 0;
        min-height: 0;
        border: solid 1px red;
        overflow: hidden;
    }

    .content-left {
        color: white;
        border: solid 1px green;
    }

    .content-middle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        border: solid 1px lightskyblue;
    }

    .content-right {
        color: white;
        border: solid 1px yellow;
    }

    .caption-container {
        color: white;
    }

    .img-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        border: solid 1px orange;
    }

    .img-box img {
        display: flex;
    }

    .close, .number-text {
        display: none;
    }

如前所述，它通常可以工作，但是一旦图像变大，它就不会缩小，因此整个内容将不适合并被剪切（.lightbox-content）。当图像不是横向而是纵向格式时，它变得更加困难......

这里还有一个用于示例的 JS Fiddle...

https://jsfiddle.net/qg52jh6a/

作为最后的手段，我可​​以限制图像大小，但我希望它尽可能灵活。有什么想法吗？

Answer 1

我将图像用作背景图像并通过 css 设置其属性，而不是将其作为图像加载。

Answer 2

我已经大大简化了你的标记，因为那里有很多不必要的位。您只需要在灯箱中使用 CSS flexbox，然后为您的图像使用object-fit: contain。如果您希望裁剪图像以覆盖所有区域，请使用object-fit: cover。

Object fit is actually very widely supported today，当然 IE11 除外。

body {
  margin: 0;
  padding: 0;
}

.lightbox {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.lightbox__caption {
  flex-grow: 0;
}

.lightbox__image {
  flex-grow: 1;
  overflow: hidden;
}

.lightbox__image img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

<div class="lightbox">
  <div class="lightbox__image">
    <img src="https://picsum.photos/800/600">
  </div>
  <div class="lightbox__caption">
    <h3>Title</h3>
    <span>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.	</span>
  </div>
</div>