Making an image responsive (re-size with browser)

Question

i'm attempting to make an image I have positioned in the center of the page, responsive (as in rescaling upon browser sizing while retaining it's position).

I've tried numerous methods (HTML and CSS only), including a popular one to add the following to the CSS:

max-width: 100%;
height: auto;
width: auto\9; /* ie8 */

However this does not seem to be working for me in Chrome or Safari.

Can anyone point me in the right direction? Thank you.

My own code is below:

<div id="contentbackground">
<div id="pagecontent">
<a href="about.html">
<img src="images/frontbanner.png" alt="Click to enter" title="Click to enter" >
</a>    
</div>
</div>

and my CSS:

#contentbackground {
    background: url("../images/frontcontent.jpg");
    width: 100%;
    min-height: 100%;
}

#pagecontent {
    margin: 0 auto;
    width: 960px;
    padding-top: 117px;
}

#pagecontent img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */

}

Dr Upvote · Answer 1 · 2015-07-20T19:09:18.780

1

1.) Simply defining a max-width as you began should work.

img {
    max-width:98%;
}

Try cleaning up your code and defining a selector directly to your image. Demo.

In your specific case I would start by cleaning up by below:

  <img src="images/frontbanner.png" class="respondme" alt="Click to enter" title="Click to enter" >

.respondme { 
  max-width: 98%;
}

#pagecontent {
    margin: 0 auto;
    width: 960px;
    padding-top: 117px;
    background: url('..coolimage.jpg'); // why do you have two wrappers, delete contentbackground entirely and merge here?
    position:relative; // adding this actually makes it a wrapper
}

2.) For just a foreground image; I prefer using bootstrap.

example:

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">

simply add class .img-responsive and your done! Demo.

3.) For background images:

background-size: 100%;

edited Jul 20 '15 at 19:09

answered Jul 20 '15 at 18:56

Dr Upvote

8,023
24
91
204

See [AR_HZ's answer](http://stackoverflow.com/questions/31524142/making-an-image-responsive-re-size-with-browser#answer-31524280). No need for Bootstrap. – Jacob Jul 20 '15 at 19:53
Thanks for your help, though I used the above answer. – Alex E Jul 20 '15 at 20:09
Thanks - fairly new to the site too. – Alex E Jul 20 '15 at 20:38

score 1 · Accepted Answer · answered Jul 20 '15 at 18:58

1

I don't think your #pagecontent should be fixed width. Try making it width: 100%; take a look here: http://jsfiddle.net/dspy5xte/1/

Also, your image does not seems to be centered.

answered Jul 20 '15 at 18:58

AR_HZ

365
1
4
18

Thank you, this indeed worked. I had given my pagecontent div the fixed width as it was advised to me that the content of a site should be designed using a 960 grid (can you tell, i'm new to this? ;) ). I've got the image centred horizontally using margin: 0 auto, i'm working on vertical now. Thanks again – Alex E Jul 20 '15 at 20:03
If you assign a fixed width you probably cannot make it responsive. Maybe you wanna look into media queries: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp – AR_HZ Jul 20 '15 at 20:30

Making an image responsive (re-size with browser)

2 Answers2