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

问题描述

我有一个以图像为背景的按钮，我想根据屏幕分辨率调整图像尺寸。对于图像，我使用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>元素内的图像，并将图像设置为按钮的背景。使用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;
}

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

button button html image resolution

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

问题描述

解决方法

相关问答