使 canvas 大小适合背景图像大小，保持其纵横比

Question

我目前正在开发一个应用程序，允许用户在图像顶部绘制形状。

我正在使用 canvas 并将background-image设置为url("uploaded image_url") 。

我无法让 canvas 尺寸同时适合背景图像尺寸和视口尺寸。

考虑以下狙击手 - 很多下部图像被裁剪：

 .drawer-area { width: 90%; background-image: url("https://i.picsum.photos/id/430/200/300.jpg?hmac=souGSmvwQ6KlJgthGYBGSWB22Y7MpK5xlgLYwvtbXzg"); background-size: cover; }

 <canvas class="drawer-area"></canvas>

请注意，我事先不知道图像的大小。 我正在使用background-size: cover和width: 90% ，但它不起作用。 有什么建议吗？

Answer 1

你试过在你的样式表上使用这样的东西吗？ background: url("uploaded image_url") center center/ cover no-repeat; 这应该使图像适合您分配给它的容器，希望它有帮助！