html - 在具有子元素的 <div> 上使用 object-fit，包括 <canvas>

Question

我有一个大小和宽度可变的外部容器。假设在这个容器内，我有一个 Canvas ，我希望它在保持比例而不是裁剪的同时尽可能多地增长。为此，我通常会使用 object-fit: contain。

现在，假设我有一个旁边放置了另一个元素的 Canvas ，而不仅仅是 Canvas 。

HTML:

<div class="outerContainer">
  <canvas width="640" height="360"></canvas>
  <div class="beside">
  </div>
</div>

CSS:

.outerContainer {
  display: flex;
  border: 0.5em solid #444;
  margin-bottom: 2em;
  object-fit: contain;
}

.outerContainer canvas {
  flex-grow: 1;
  background: #77a;
}

/* This element has a fixed width, and should be whatever height the <canvas> is */
.outerContainer .beside {
  flex-basis: 3em;
  flex-grow: 0;
  flex-shrink: 0;
  background: #7a7;
}

在这种情况下，我想缩放整个 outerContainer 的大小，就像我对 Canvas 所做的那样。问题是 object-fit 实际上并没有缩放元素……它缩放了它的内容。这似乎不适用于普通的 block 元素，导致如果有足够的宽度，内部的 Canvas 可能会倾斜。

如果我将 object-fit: contain 添加到 canvas 元素，它会保持比例但仍使用全宽，即 .beside 元素一直在右边。这在 Canvas 上以紫色背景显示。

我想要的是 outerContainer 随 Canvas 内容缩放，以便 .beside 始终具有 Canvas 内容的高度。 .outerContainer 应该在父元素中居中，在不扭曲 Canvas 的情况下尽可能多地占用空间。像这样，在任何比例比例下:

现代 CSS 是否可行？还是我必须使用脚本解决方案？

摆弄例子:https://jsfiddle.net/nufx10zc/

Answer 1

我不知道它是否适合你，但我认为如果你允许多一点 HTML，它主要可以在 css 中完成。

考虑以下 html

<div class="outerContainer">
  <div class="canvasContainer">  
    <canvas width="640" height="360"></canvas>
  </div>
  <div class="beside">
  </div>
</div>

我刚刚在 Canvas 周围添加了一个小 div。这样我们让 Canvas 处理它的事情，我们使用 div 来处理 flex 事情。

使用以下 CSS:

* {
  box-sizing: border-box;
}

.outerContainer {
  display: flex;
  border: 0.5em solid #444;
  margin-bottom: 2em;
}

.canvasContainer canvas {
  width: 100%;
  background: #777;
  margin-bottom: -4px
}

.canvasContainer {
  flex-grow: 1;
  background: #77a;
}

/* This element has a fixed width, and should be whatever height the <canvas> is */
.outerContainer .beside {
  flex-basis: 3em;
  flex-grow: 0;
  flex-shrink: 0;
  background: #7a7;
}

我们有 Canvas 容器占用所有可用空间。然后 Canvas 会根据其中的图像缩放进行相应调整。 但是我不知道为什么， Canvas 底部有一点边距，因此它的边距为负数。

fiddle :https://jsfiddle.net/L8p6xghb/3/

作为旁注，如果您希望将其用于字幕，可以使用 html5 元素，例如 <figure> 和 <figcaption> !