Question:
How to make an image resize with the rest of your page? HTML & CSS?
anonymous
2011-04-14 08:33:09 UTC
I have a webpage and I have a wrapper, and I am trying to make my picture inside the wrapper resize with the page like the wrapper does? I'm really confused and I have been looking everywhere for it and of course my mentor is out of town and this is all due on the 20th. Help!!
Thanks
Three answers:
anonymous
2011-04-14 08:45:31 UTC
Standard image tags should always tell the browsers what size they should be. Even if you use CSS for the images. If you are referring to making a background image 100% of the page size, then this is what you need:



http://www.cssplay.co.uk/layouts/background.html

http://paynelessdesigns.pastebin.com/f3fbc9dfd



bgStretcher jQuery Plugin Allows to Add Background Image to Page and Proportionally Resize it to Fill Entire Window Area: http://www.ajaxblender.com/bgstretcher-jquery-stretch-background-plugin.html



Ron
Tikken
2011-04-14 09:13:43 UTC
You can place an image inside a div, and give it a width and height of 100%, this should make it resize with the div itself.



You however can't have it resize well with content, in which case you would usually have a background attached in a div instead, and have it repeat towards the bottom. But this is also not the "best" way, as it would fix the width of the container.



So it really depends on what exactly you want. If you want the image to actually resize, rather then simply repeat it self, thats not recommended. It would quickly become unsharpened in larger resolutions.



To maintain a flexible container, you would have to build the background in "layers", and even than you still have limits. But it dose somewhat "push" your limits with an extra tool to work with. The keywords are "z-index", and "position".



Simply build your background in layers from within Photoshop, Paint.net (or whatever you are using), then save each layer as a separate image, (or inside a css sprite). You would than use the first layer as the repeatable background, and place subsequent layers using absolute positioning inside the container.



For this to work you need to first position the container it self, i suggest using "position:relative;" for that, since it will keep the container in place, while allow for absolute positioning of child elements. These child elements should have z-index of 1, while the final content container should have a z-index of 2, (to avoid content being positioned visually below the other elements.).





Also. Someone claimed you had to use the width/height properties, which is just false. There is nothing wrong with just using CSS for your images alone. The only thing which might be effected is the rendering speed, since browsers may have to calculate the width/height on their own, which is like a few milliseconds. Obsessing about things at that level is really not worth your effort.
anonymous
2016-03-02 12:13:33 UTC
The 1st respondent is correct. What you maybe thinking of is the ability in Html/CSS to control the size of the displayed image. This doesn't actually reduce the size or change (eg. decrease the time of) the download. If you are running something like a Public Photo Album website there are scripts and utilities out there to automatically generate "thumb-nail" images so people can decide if they want to download the big image. Hope this helps.


This content was originally posted on Y! Answers, a Q&A website that shut down in 2021.
Loading...