javascript - 如何根据div大小调整图像大小？

Question

我的 HTML5 代码是

     <div id="changeimg" align="center">
           <div id="imgbutton" onclick="changeimg()"/>
    </div>

我的CSS是

 #imgbutton
   {
     background-image:url('../images/tab1.png'); 
     height:35px;
     width:269px;
     border-radius:8px;
     margin-left:6%;
   }
    #changeimg
   {
     width:80%;
     height:50px;
     margin-left:5%;
     padding-top: 12px;
     z-index: 1;
  }

在图像按钮 div 中，我在背景中使用图像，我想在更改屏幕尺寸时根据更改图像 div 调整图像。有人可以帮我吗？提前致谢！！

Answer 1

也许这篇文章对你来说很有趣：使用 CSS 设置背景图像的大小？

这个任务只能通过使用 CSS3 来完成。不支持“背景尺寸”的浏览器不会缩放背景！

background-size: 100% auto; // 100% width and auto height, keeping aspect ratio
background-size: auto 100%; // 100% height and auto width, keeping aspect ratio
background-size: 100% 100%; // 100% width and height, aspect ratio will be lost

Answer 2

我仍然不知道您为什么要为图像使用 div 。

<div id="changeimg" align="center">
    <img id="imgbutton" src="../images/tab1.png" onclick="changeimg()" />
</div>

这个CSS

#imgbutton
{
  height:100%; /*I'm not 100% sure, but leaving height out might maintain aspect ratio*/
  width:100%;
  border-radius:8px;
  margin-left:6%;
}
#changeimg
{
  width:80%;
  height:50px;
  margin-left:5%;
  padding-top: 12px;
  z-index: 1;
}