css – 使用对象拟合与子元素,包括a

我有一个尺寸和宽度可变的外部容器.假设在这个容器里面,我有一个画布,我想要尽可能地增长,同时保持比例而不是裁剪.为此,我通常会使用object-fit：contains.

现在,假设,而不是只是一个画布,旁边放着另一个元素.

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：contains到canvas元素,它保持比例,但仍然使用全宽,意味着.beside元素一直到右边.这是可视化与画布上的紫色背景.

我想要的是外部容器被缩放的画布内容,所以.beside总是具有画布内容的高度. .outerContainer应该在父元素中居中,占用尽可能多的空间,而不会使画布失真.像这样,按比例的比例：

这是否适合现代CSS？还是必须使用脚本解决方案？

示例：https://jsfiddle.net/nufx10zc/

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

* {
  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;
}