[英]How to adjust image size according to div size?
My HTML5 code is 我的HTML5代码是
<div id="changeimg" align="center">
<div id="imgbutton" onclick="changeimg()"/>
</div>
My css is 我的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;
}
in image button div i am using image in background and i want to adjust image according to change image div as i change the screen size.Can any one help me to do this?? 在图像按钮div中,我在背景中使用图像,并且我想在更改屏幕尺寸时根据更改图像div调整图像。 Thanks in advance!! 提前致谢!!
Maybe this post is interesting for you: Set size on background image with CSS? 也许这篇文章对您来说很有趣: 使用CSS在背景图片上设置尺寸?
This task can only be achieved by using CSS3. 此任务只能通过使用CSS3来完成。 Browsers that don't support "background-size" wont scale the background! 不支持“ 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
I still don't know why you are using a div for the image. 我仍然不知道为什么要对图像使用div。
<div id="changeimg" align="center">
<img id="imgbutton" src="../images/tab1.png" onclick="changeimg()" />
</div>
and this css 和这个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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.