如何根据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”的浏览器将无法缩放背景！

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