Question

我正在尝试自动裁剪图片以适合画布（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;
}

这可以追求时尚，但我必须在height中使用硬编码的div.carouselContainer值。

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

这可以不使用background属性而不使用JS吗？

TIA

Answer 1

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

Answer 2

您可以删除img标记并将该图像用作carouselContainer div上的background-image属性，这样图像大小不会影响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。

大小div适合特定元素

2 个答案: