JS image resize
- Started
- Last post
- 8 Responses
- qoob
Anyone know of a script or plugin that will resize an image to the size of its container?
I figured this would be easy to find, but no luck so far:(
The requirement is that it needs to scale both vertically AND horizontally to fit the parent element.
- dbloc0
?
width: 100%;
height: auto;
- prophetone0
try this maybe: http://stackoverflow.com/questio…
<!DOCTYPE HTML>
<html>
<style type="text/css">
div {
height:300px;
width:250px}
img {
height:100%;
width:100%}
</style>
<body>
<div>
<img src="myPicture.jpg">
</div>
</body>
</html>
- qoob0
Thanks guys
The problem with the 100% width solution is it only scales based on the width. I'm looking for something that scales down based on either width OR height depending on which is smaller, while also keeping the aspect ratio.
- Nathan_Adams0
Set the image as the background-image of the container, and set background-size: contain;
- Although not so great for old browsers IE8 and older.Nathan_Adams
- Yeah, I got excited for a sec there...how could it be so easy?:)qoob
- Lack of IE7/IE8 support is problematic thoughqoob
- foobaz0
I created a jQuery plugin for responsive images for a personal project that will grow and shrink with your container.
Your needs sound similar so I put it up on Github if you're interested.
Example On GitHub Here: http://iamjpg.github.com/jQuery-…
Downloadable Here: https://github.com/iamjpg/jQuery…
- Should mention that it keeps aspect ratio in tact.foobaz
- ideaist0
I'm working on my new portfolio site which does this through a hack of sorts. I'll post an example when I can qoob...
; )
- qoob0
Thanks everyone. FYI, this is what I settled on:
https://github.com/adeelejaz/jqu…
And then added the function:
function imgResize() {
$("img").each(function(index, value) {
parentHeight = $(this).parent().height();
parentWidth = $(this).parent().width();
$(this).aeImageResize({ height: parentHeight, width: parentWidth });
});
};
$(window).resize(function(){
mgResize();
});That will resize every image to the size of the width or height of its container, keeping the aspect ratio.
- Typo in second to last line...should be "imgResize();"qoob
- sublocked0
^ shoulda posted a link to a gist or something. https://gist.github.com/