Html 大小div以适合特定元素

我正在尝试自动裁剪图像以适合画布（）

我有一个包含画布和图像的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

您可以从画布上删除

位置：绝对

，然后将其放在图像上。这使得容器的高度由画布的高度决定，并且图像将被容器上的

溢出：隐藏

剪裁。

您可以从画布上删除

位置：绝对

，然后将其放在图像上。这使得容器的高度由画布的高度决定，并且图像将被容器上的

溢出：隐藏
剪裁。
您可以删除img标记，并将图像用作CarouseContainer div上的背景图像属性，以便图像大小不会影响div大小

HTML:

使用background-position-y调整背景位置。如果需要移动画布，现在可以使用边距顶部或填充顶部。
您可以删除img标记，并将图像用作旋转容器div上的背景图像属性，这样图像大小就不会影响div大小

HTML:

使用background-position-y调整背景位置。如果需要移动画布，现在可以使用边距顶部或填充顶部。
遗憾的是，这不起作用。图像溢出，画布隐藏/消失。遗憾的是，这不起作用。图像溢出，画布隐藏/消失。谢谢，但我试图避免使用
background
属性。谢谢，但我试图避免使用
background
属性。
<div class="carouselContainer">
  <canvas width="1505" height="393" class="webgl webgl-head" style="width: 1505px; height: 393.3px;"></canvas>
</div>

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

/* .webgl removed */