Image not scaling properly with browser

Question

Ugh,

I been trying to tackle this problem for a long time....Please help.

So I am trying to set up a background image , using only css/html. The image is pretty large i want to scale it down to fit perfectly for any time of aspect ratio. I have searched all over stackoverflow even tried some suggestions from here:

CSS background image to fit width, height should auto-scale in proportion

but nothing is working...

here is how it looks in my IE browser: http://i829.photobucket.com/albums/zz217/prakash911/site_zps36d59541.png

Actual Image: http://i829.photobucket.com/albums/zz217/prakash911/background_zps92b4855f.png

sample Test DEMO: http://jsfiddle.net/4GkFu/

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body style="overflow:hidden;">

        <div id="divimg" style="position:absolute; left:0px; top:0px; right:0px; bottom:0px; overflow:hidden;" >
            <img src="img/background.png" style="position:absolute; left:0px; top:0px; width:100%; height:auto;"/>
        </div>

    </body>
</html>

Pro-tip: make your photobucket private. I can see your checking account numbers. — Mike Robinson, Jun 13 '13 at 18:07
I already tried that, it wont scale properly. either gets cut off or is distorted — Prakash Chennupati, Jun 13 '13 at 18:09
What are you even trying to do here? It's not possible to make the whole image display in the window regardless of aspect ratio or resolution unless you stretch the image. You have to decide whether you would rather have the sides or top/bottom cropped off. Think about it. — Ennui, Jun 13 '13 at 18:10
Your image's aspect ratio is not the same as a normal screen aspect ratio, and it's certainly not the same as EVERY screen aspect ratio. You either have to stretch it (which will distort it because you will simply be cramming it into the available space regardless of proportions) or you have to set it to 100% height OR width and then crop the other dimension. — Ennui, Jun 13 '13 at 18:11
I would not mind, losing some of the pixels from the sides. I really need the bottom white/gray bar to appear in my browser. currently it is getting cut off — Prakash Chennupati, Jun 13 '13 at 18:13

score 1 · Answer 1 · answered Jun 13 '13 at 18:13

1

What I know is.. and have seen it in many websites that.. the background image do not scale automatically. It is just placed in center that it looks fine with any screen aspect ratio.

For Example:

Background image

Website

answered Jun 13 '13 at 18:13

Veer Shrivastav

5,434
11
53
83

1

if I place an image inside a Div tag, and the div tag is set to 100% width and height. the image inside should be able to fit inside the div. but in my demo it is not – Prakash Chennupati Jun 13 '13 at 18:15
setting the div width to 100% means it will adapt the size of body tag.. "parent" tag. – Veer Shrivastav Jun 13 '13 at 18:18

Smeegs · Answer 2 · 2013-06-13T18:22:02.803

-1

Here is a fiddle.

http://jsfiddle.net/4GkFu/9/

All I did was move the image to the background-image of the div you're trying to fill.

I'm not sure if this is what you want

<body style="overflow:hidden;">
    <div id="divimg" style="position:absolute; left:0px; 
top:0px; right:100px; bottom:0px; overflow:hidden;
background-image: url('http://i829.photobucket.com/albums/zz217/prakash911/background_zps92b4855f.png'); background-size: contain;
background-repeat: no-repeat;
"></div>
</body>

you want to set the background-size to contains

edited Jun 13 '13 at 18:22

answered Jun 13 '13 at 18:15

Smeegs

9,151
5
42
78

see even in your jsfiddle. the image is being cut off at the bottom. if you compare it to the original picture. i dont want it to get cut off. just scale to fit inside the div tag – Prakash Chennupati Jun 13 '13 at 18:17
Oh, so you just want to fit the entire image in the div? – Smeegs Jun 13 '13 at 18:18
I updated my fiddle to reflect the change. I thought you want the image to fill the div, not for the div to contain the image. – Smeegs Jun 13 '13 at 18:20
i got the same result, when i changed the height from auto to 100% in my code but is it possible to scale it without distortion – Prakash Chennupati Jun 13 '13 at 18:22
Yes, set the size to "contains" check my answer, i updated the fiddle – Smeegs Jun 13 '13 at 18:23
i tired that also :( set to contain, wont extend the image to scale for large aspect ratios... – Prakash Chennupati Jun 13 '13 at 18:26
are you opposed to using javascript or jquery? This might be able to be done the way you want using plain css – Smeegs Jun 13 '13 at 18:27
I rather not use Javascript, but if wont be possible just using css/html alone. than I guess Javascript is only solution... – Prakash Chennupati Jun 13 '13 at 18:30
So, I have to ask. What's wrong with the fiddle that you posted? That's why I was so confused. The one that you posted has the entire image in view, and staying with the proper ratio. What behavior didn't you like? – Smeegs Jun 13 '13 at 18:39
it is in the fiddle, but if you run that code in your browser, the bottom of the picture gets cut off. I included a picture of my IE in my question to show how it looks in my browser. you can see it's not the complete image. – Prakash Chennupati Jun 13 '13 at 18:41
Yeah, this sounds like a job for javascript. You have to compare the ratios of the image and the container and decide whether you want the height or the width to be at 100%. – Smeegs Jun 13 '13 at 18:43

score -1 · Answer 3 · answered Jun 13 '13 at 18:18

body {
    margin: 0;
    background: red     url('http://i829.photobucket.com/albums/zz217/prakash911/background_zps92b4855f.png') 0 0 no-    repeat;
  background-size:cover;
  background-position:center center;
  background-attachment:fixed;

}

http://jsfiddle.net/4GkFu/6/

Image not scaling properly with browser

3 Answers3