CODEWITHSUNDEEP
csshtmlheight
arturojain
arturojain

Reputation: 167

Change image width and height depending on device/browser size

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?

Upvotes: 1

Views: 7723

Answers (4)

Jonas Libbrecht
Jonas Libbrecht

Reputation: 777

@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 :)

Upvotes: 1

Felix
Felix

Reputation: 38102

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')";

Upvotes: 4

Fred Wu
Fred Wu

Reputation: 928

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

Upvotes: 3

Joe Conlin
Joe Conlin

Reputation: 5994

Use this to make images responsive: 

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

Upvotes: 1

Related Questions