85

I want all (or just some) of my images getting resized automatically when I resize my browser window. I've found the following code - it doesn't do anything though.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    </head>
    <body>
        <div id="icons">
            <div id="contact">
                <img src="img/icon_contact.png" alt="" />
            </div>
            <img src="img/icon_links.png" alt="" />
        </div>
    </body>
</html>

CSS

body {
    font-family: Arial;
    font-size: 11px;
    color: #ffffff;
    background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
    background-size: cover;
}

#icons {
    position: absolute;
    bottom: 22%;
    right: 8%;
    width: 400px;
    height: 80px;
    z-index: 8;
    transform: rotate(-57deg); 
    -ms-transform: rotate(-57deg); 
    -webkit-transform: rotate(-57deg); 
    -moz-transform: rotate(-57deg);
}

#contact { 
    float: left; 
    cursor: pointer; 
}


img { 
    max-width: 100%; 
    height: auto; 
}

How can I basically have a fullscreen design (with background-size: cover) and have div elements be at exactly the same position (% wise) when resizing the browser window, with their size also resizing (like cover is doing for the background)?

Pieter VDE
  • 2,195
  • 4
  • 25
  • 44
sigug
  • 1,159
  • 1
  • 11
  • 17
  • did you mean responcive css otherwise just change position fixed – Mayur Patel Apr 25 '13 at 14:25
  • 1
    Possible duplicate of [How can I resize an image dynamically with CSS as the browser width/height changes?](http://stackoverflow.com/questions/4684304/how-can-i-resize-an-image-dynamically-with-css-as-the-browser-width-height-chang) – tjati Mar 18 '16 at 07:30

4 Answers4

176

To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.

source: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

for example :

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

and then any images you add simply using the img tag will be flexible

JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).

gelanivishal
  • 288
  • 2
  • 12
Curtis Crewe
  • 4,126
  • 5
  • 26
  • 31
  • Thanks, but I already did this (see code above) and the image(s) don't resize when I make the browser window smaller? – sigug Apr 25 '13 at 14:28
  • Thanks, that's the way it works as well as with the other examples I've found. I don't know why it doesn't work with my own test htm page... Hmm – sigug Apr 25 '13 at 14:33
  • 3
    The code did not work for me, so I changed the max-width to width only eg. max-width: 100% replaced by width: 100% and this solved it for me. Tested on FF, Safari and Chrome as well as on Galaxy S4 FF and default browser. – Paul van Jaarsveld Feb 10 '14 at 13:52
  • Great! I'm using Chrome and I need to change width: auto\9; to width: auto; to make it work. – cheny Jan 26 '15 at 12:17
  • @sircapsalot It seems your Jsfiddle doesn't work as expected at all with Firefox 35 ? – Skippy le Grand Gourou Feb 16 '15 at 09:56
  • the answer is an exact duplicate of Kurt Schindler answer http://stackoverflow.com/questions/4684304/how-can-i-resize-an-image-dynamically-with-css-as-the-browser-width-height-chang – Shubham Khatri Jun 07 '16 at 05:38
  • genius ,,,,,,,. –  Jan 05 '18 at 11:42
5

image container

Scaling images using the above trick only works if the container the images are in changes size.

The #icons container uses px values for the width and height. px values don't scale when the browser is resized.

Solutions

Use one of the following approaches:

  1. Define the width and/or height using % values.
  2. Use a series of @media queries to set the width and height to different values based on the current screen size.
Matt Coughlin
  • 18,666
  • 3
  • 46
  • 59
  • Thanks. The problem remaining now is that even though two different images are in one div container, those two images scale differently?? – sigug Apr 25 '13 at 14:50
  • @Simon: The scaling of the images is based on their immediate parent container. The 2 images have different parent containers. One is in `#icons` and the other is in `#contact`. `#contact` would have to be scaled as well, in a way that's consistent with `#icons`. – Matt Coughlin Apr 25 '13 at 14:52
  • Hmm, I have
    and yet only the second div gets resized right when i resize, and the first div only gets resized when i resize the window way more.     – sigug Apr 26 '13 at 09:07
  • @Simon: A div has `width: 100%;` by default, unless it's floated or inline-block. If you want a floated div to have `width: 100%;`, then there's no reason to float it. But perhaps you need a width that's less than `100%` for the image containers (one or both of which could be floated), depending on what you're trying to do (I have no idea what it's supposed to look like). – Matt Coughlin Apr 26 '13 at 11:11
1

This may be too simplistic of an answer (I am still new here), but what I have done in the past to remedy this situation is figured out the percentage of the screen I would like the image to take up. For example, there is one webpage I am working on where the logo must take up 30% of the screen size to look best. I played around and finally tried this code and it has worked for me thus far:

img {
width:30%;
height:auto;
}

That being said, this will change all of your images to be 30% of the screen size at all times. To get around this issue, simply make this a class and apply it to the image that you desire to be at 30% directly. Here is an example of the code I wrote to accomplish this on the aforementioned site:

the CSS portion:

.logo {
position:absolute;
right:25%;
top:0px;
width:30%;
height:auto;
}

the HTML portion:

<img src="logo_001_002.png" class="logo">

Alternatively, you could place ever image you hope to automatically resize into a div of its own and use the class tag option on each div (creating now class tags whenever needed), but I feel like that would cause a lot of extra work eventually. But, if the site calls for it: the site calls for it.

Hopefully this helps. Have a great day!

Chad
  • 41
  • 3
-1

The following works on all browsers for my 200 figures, for any width percentage -- despite being illegal. Jukka said 'Use it anyway.' (The class just floats the image left or right and sets margins.) I can't imagine why this isn't the standard approach!

<img class="fl" width="66%"
src="A-Images/0.5_Saltation.jpg"
alt="Schematic models of chromosomes ..." />

Change the window width and the image scales obligingly.

Ferren
  • 11
  • 5