使画布大小适合背景图像大小，并保持其长宽比

问题描述

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

我正在将background-image设置为url("uploaded image_url")的画布。

我无法同时使画布大小适合背景图像大小和视口大小。

考虑以下抓取器-裁剪了很多下部图像：

.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%，但是并不能解决问题。有什么建议吗？

解决方法

您是否尝试过在样式表中使用类似的内容？ background: url("uploaded image_url") center center/ cover no-repeat; 这应该使图像适合您分配给它的容器，希望对您有所帮助！