Hello All,
How can i make a page in every window. Here i am not saying that its whole look should change in mobiles or tabs. But i want that the picture should get fir there proportionally, no slider should be required.
see this link, when you resize the window… everything gets fitted.
Initially, i was thinking that taking width and height in percentage will solve my problem but it is not.
Thanks
Shail
You’d have to remove it as a CSS backgorund and place it as an <img> which would allow for the percentage widths and heights adjust accordingly to screen size.
if I understand rightly, these days the standard approach is to keep it as a background image and use the background-size property—such as background-size: cover.
Another cool thing I did not know!
Looks like IE8 has no support for it though so that’s something OP has to keep in mind. IE8 is basically dead though.
can you please explain me with a small example…
I think Ralph got it slightly screwed up. The “contain” will stretch the image as large as possible and actually expects it to get covered up slightly.
Do background-size: 100% 100%; which will make the image stretch 100% width/height.
so can you please give me a little example…
To me, “proportionally” calls for cover. Using 100% 100% will distort the image in many cases, so is rarely much use. Perhaps 100% auto or something would be better, but the OP has to be a lot clearer about the actual need for us to have any hope of helping.
I understood where you got his logic from but he has a min-height set on the element IIRC of like 800px so I doubted that any real stretching or shrinking would occur.
It depends on the image and also what widths are set on the element, how responsive it is etc.
i tried this and works finw when i resized window.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.bg{ width:60%; margin:auto; background-size:cover; overflow:hidden; }
</style>
<title>Untitled Document</title>
</head>
<body>
<div class="bg"><img src="css/clicks/002.jpg"/ width="100%" height="100%;"></div>
<div class="bg">I am the best. you are not. i love myself and you. huu.. what to say.</div>
</body>
</html>But when in style tag iam making width 100% an height to 300px, image doesnt fits proportionally when resized.
[code]<!doctype html>
.bg{ width:100%; margin:auto; background-size:cover; overflow:hidden; height:300px; } Untitled Documentresult on resize:
Try this in your css background-size: 100%; instead of background-size: cover;
More info can be found here: https://developer.mozilla.org/en-US/docs/CSS/background-size
i tries that but result is same… no proportionality in second case… height becomes greater than width on minimizing
That has to be the case while you have a fixed height on the element: height:300px;. Remove that if you want the height to scale as well, or at least make it a max-height or something.
if i am removing height then, it is covering the whole page… i want to use a pic for cover page… 100% width nd arounf 350px height… so that other data can be there, below it.
If this is just an image that’s part of the content and which you want to scale, then I take back what I said earlier. Just place the image in the HTML and set tis width to 100% or similar. That way, it will grow and shrink with the browser.
i did that in case two… even i removed the style completly. but in that case two , height becoming greater.
http://www.buddiescolumn.co.in/bg.php
resize this
You’ve still got a fixed height in there, though. You need to remove that. So instead of this (which has errors anyway):
<img src="css/clicks/002.jpg" width="100%" ;="" height="350">
try this:
<img src="css/clicks/002.jpg" width="100%">
or better still, use CSS (here inline, but this should really be external):
<img src="css/clicks/002.jpg" style="width: 100%;">