在 HTML 和 CSS 中根据屏幕分辨率调整按钮背景图像的大小

resize the image of button background relative to screen resolution in HTML with CSS

我有一个以图像为背景的按钮，我想根据屏幕分辨率调整图像大小。对于图像，我使用 width:100%，但在这种情况下，如果我将它用于按钮，按钮大小会根据屏幕分辨率进行调整，但不会根据它用作背景的图像进行调整。我该怎么做才能使图像以与按钮相同的方式调整大小？

<!DOCTYPE html>
<html>
<body>
  <button class="dog"><img src="pictures/dog.png" ></button>
  <style>
  .dog {
    position:absolute;
    width:100%;
    left:1%;
    top:6%;
  }
</style>
</body>
</html>

您可以删除 <button> 元素内的图片，并将图片设置为按钮的背景。使用 CSS 背景属性，例如 background-size 使背景自动适合您的按钮。

.bill {
  width: 180px;
  height: 80px;
  background: url("https://www.fillmurray.com/640/360");
  background-position: center;
  background-size: cover;
  color: floralwhite;
  font-weight: bold;
  font-size: 1.4em;
}

<button class="bill">Bill Me!</button>