使用 CSS 调整 HTML 中按钮背景图像相对于屏幕分辨率的大小

【问题标题】：resize the image of button background relative to screen resolution in HTML with CSS使用 CSS 调整 HTML 中按钮背景图像相对于屏幕分辨率的大小
【发布时间】：2021-01-05 12:20:29
【问题描述】：

我有一个带有图像作为背景的按钮，我想根据屏幕分辨率调整图像大小。对于图像，我使用宽度：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>

【问题讨论】：

标签： html css image button resolution

【解决方案1】：

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

.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;
}

&lt;button class="bill"&gt;Bill Me!&lt;/button&gt;

【讨论】：