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>
3 answers
solution1
1 2013-06-13 18:13:59
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:
solution2
-1 2013-06-13 18:15:04
Here is a fiddle.
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
solution3
-1 2013-06-13 18:18:36
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.