How to adjust image size according to div size?

Question

My HTML5 code is

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

My css is

 #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?? Thanks in advance!!

Look at this ... http://stackoverflow.com/questions/1341358/set-size-on-background-image-with-css — Stphane, Sep 20 '12 at 12:58
And why are you using a div with a background-image, instead of an img tag where you could set the height/width to 100%? — CaffGeek, Sep 20 '12 at 13:04

score 1 · Accepted Answer · edited May 23 '17 at 12:09

1

Maybe this post is interesting for you: Set size on background image with CSS?

This task can only be achieved by using CSS3. Browsers that don't support "background-size" wont scale the background!

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

edited May 23 '17 at 12:09

Community

1
1

answered Sep 20 '12 at 13:02

SvenFinke

1,254
3
15
30

actualy i am using button image in the background so i cannot repeat that image.i have tried background size but its not working!! – Ekta Shukla Sep 20 '12 at 13:07
Can we stretch image from its size aur shrink it accordingly?? – Ekta Shukla Sep 20 '12 at 13:08

score 0 · Answer 2 · answered Sep 20 '12 at 13:12

0

I still don't know why you are using a div for the image.

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

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

answered Sep 20 '12 at 13:12

CaffGeek

21,856
17
100
184

i got my solution..its working now to use background-size property..Thank to all of you!! – Ekta Shukla Sep 20 '12 at 13:32

How to adjust image size according to div size?

2 Answers2