大小 div 以适合特定元素答案

【问题标题】：Size div to fit particular element大小 div 以适合特定元素
【发布时间】：2017-09-20 09:21:38
【问题描述】：

我正在尝试自动裁剪图像以适应画布 (http://webglworkshop.com/js-test.html)。

我有一个包含画布和图像的 div，以及下面的 css：

div.carouselContainer {
  height: 300px;
  border: 5px solid blue;
  overflow: hidden;
}

.webgl {
  position: absolute;
  top: 10px;
  border: 5px solid green;
}

.backgroundImage {
  display: inline;
}

这很有效，但我必须在div.carouselContainer 中使用硬编码的height 值。

我想删除 height 属性并让 div 自动调整大小以仅适合画布。

如果不使用background 属性并且不使用JS，这是否可能？

TIA

【问题讨论】：

标签： html css canvas

【解决方案1】：

您可以从画布中删除position: absolute，并将其放置在图像上。这样就使得容器的高度由画布的高度决定，图片会被容器上的overflow: hidden剪裁。

【讨论】：

很遗憾，这行不通。图像溢出，画布隐藏/消失。

【解决方案2】：

您可以删除 img 标记并将图像用作 carouselContainer div 上的背景图像属性，这样图像大小就不会影响 div 大小。

HTML：

<div class="carouselContainer">
  <canvas width="1505" height="393" class="webgl webgl-head" style="width: 1505px; height: 393.3px;"></canvas>
</div>

CSS：

div.carouselContainer {
  background-image: url(code/img/milky.jpg);
  background-position-y: 90%;
}

/* .webgl removed */

用 background-position-y 调整背景位置。如果您需要移动画布，现在可以使用 margin-top 或 padding-top。

【讨论】：

谢谢，但我尽量避免使用 background 属性。