Change image width and height depending on device/browser size

Question

I have this div:

<div id="background">
            <img src="imagenes/index.jpg" height="auto" width="100%"/>
</div>

with this CSS:

#background {
position: fixed;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
right: 0%;
z-index: -1; }

I want to know if there is a way to change the image height/width depending in whether the device/browser is bigger in the height/width so the image can cover the full screen.

I know changing the height="100%" width="auto" would make a good option if the device/browser is taller, but if it is wither it is not.

Any good idea?

Is the image a portrait or landscape? Would you want it on portrait devices or landscape devices? — Idris
– Idris, Commented Jan 21, 2014 at 2:06

Felix · Accepted Answer · 2014-01-21 02:14:47Z

Normally, when you target mobile device, you should use media queries. However in your case, it's just a full screen background so you can use background-size property here:

#background { 
    background: url(imagenes/index.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Note: This property is only supported in modern browser, for old IE versions(<8), you can try to use this IE filter:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='imagenes/index.jpg',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='imagenes/index.jpg',
sizingMethod='scale')";

Fred Wu · Accepted Answer · 2014-01-21 02:13:33Z

3

If you can set a specific value, you may try @media feature.

#background
{
    height:100%;
    width: 100%;
}
@media(max-width:1000px){
    #background{
        height:1000px;
        width: 800px;
    }
}

answered Jan 21, 2014 at 2:13

Fred Wu

9281 gold badge9 silver badges14 bronze badges

Comments

Joe Conlin · Accepted Answer · 2014-01-21 02:09:17Z

1

Use this to make images responsive:

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

answered Jan 21, 2014 at 2:09

Joe Conlin

5,9945 gold badges27 silver badges35 bronze badges

Comments

Jonas Libbrecht · Accepted Answer · 2014-01-21 02:19:45Z

1

@media all and (min-width: 768px) and (max-width: 1024px) {
     .pr {
      display: none;
     }
     //write here rest of code that will vanish when the screen is smaller then 1024px
    }

Hope this helps! I used it for some projects of mine, worked like charm to vanish some stuff :)

answered Jan 21, 2014 at 2:19

Jonas Libbrecht

7891 gold badge8 silver badges17 bronze badges

Collectives™ on Stack Overflow

Change image width and height depending on device/browser size

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related