Auto resize image to fill container div

**gktareen** · Jan 22, 2013 06:05

Hi all,

I'm working on a fluid-layout website with two main divs side-by-side at 50% width each. One of these divs is split horizontally with 2 divs at 50% height each. Inside these divs are images or videos which need to fill the container div.

Please see this link for a working example: Click here

The problem I have is that when the window is resized, the images do not fill the container. Is there some javascript that is needed to automatically resize the images to fill the container divs?

Can anyone please tell me what I need to do to achieve this?

Thank you in advance,

GKTareen

**RyanKing1809** · Jan 22, 2013 07:34

Hi,

You can just do this with css - you just need to tell the img or vid width to equal 100% its container width. This would work for example:

Code:

#div {width: 50%}
#div img {width:100%}

If you post your code we may be able to help you further.

**Pullo** · Jan 22, 2013 07:50

Hi,

You can do it like this:

HTML Code:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Dynamically resize image</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <style>
      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      
      #container{
        height: 100%;
        width:300px;
	overflow:hidden
      }
    </style>
  </head>
  
  <body>
    <div id="container"><img src="contact.jpg" id="image"></div>
    <script>
      $(window).load(function() {
        function resizeImage(){
          img.css('height', el.height());
        }
        
        $(window).resize(function() {
          resizeImage();
        });
        
        var el = $("#container");
        var img = $("#image");
        resizeImage();
      });
    </script>
  </body>
</html>

Here's an example of what it looks like: http://hibbard.eu/blog/pages/dynamically-resize-image/

Whatever the viewport dimensions, the image will always scale to take up 100% of the available height (try resizing the window)

HTH

Edit: Oops! Ryan was faster and has a better solution. Note to self: Just because you can do it in jQuery, doesn't necessarily make it a good idea

**gktareen** · Jan 22, 2013 09:40

Thanks for your replies guys. The solutions above are good but they do not keep the proportions of the image. The image needs to fill both the height and the width at 100% without stretching or squashing the image. Please see this website as an example: http://belstaff.com

**RyanKing1809** · Jan 22, 2013 16:23

Originally Posted by gktareen

Thanks for your replies guys. The solutions above are good but they do not keep the proportions of the image. The image needs to fill both the height and the width at 100% without stretching or squashing the image. Please see this website as an example: http://belstaff.com

Unless you've defined a height it should maintain the proportions - or you could try height:100% but it wont always fill the container like you're after. You could try background-size:cover http://css-tricks.com/perfect-full-p...kground-image/ - there's some jquery there they you might be able to use on videos as well.

**luc.tw** · Jan 22, 2013 16:53

To maintain image proportion and still fill whole container.
We must set container's overflow: hidden
And set shortest side to 100% and make another side to auto. (Some portion will be clipped out)

**Pullo** · Jan 23, 2013 07:53

Hi,

The page you link to uses JavaScript to automatically resize the image.
However, this doesn't always work flawlessly and by manually resizing your browser, it is quite easy to create a gap between the image on the left and the content on the right.
Also, parts of the image get cut off if you resize your browser below certain dimensions.
This is logical as the aspect ratio must be preserved, so that the image doesn't get squashed or stretched.

If I was you, I'd opt for Ryan's CSS solution, so that the image always fills the height of the viewport and live with the fact that 100% height, 100% width, correct aspect ratio and no cropping will not be possible.

If you're interested this is the code the other site uses to do the resizing:

Code JavaScript:

function resizeImage(){
  //Resize Bottom Right Image
  var image = jQuery("#bottomRightImage");
  var imageParentElement = jQuery('#hp-rhs-bottom');
  var widthRatio = imageParentElement.outerWidth() / imageRatio.width;
  var heightRatio = imageParentElement.outerHeight() / imageRatio.height;
  var ratio = Math.max(widthRatio, heightRatio);
  image.css({
    width: Math.ceil(ratio*imageRatio.width) ,
    height: Math.ceil(ratio*imageRatio.height)
  });
}

User Tag List

Thread: Auto resize image to fill container div

Thread Tools

Display

Auto resize image to fill container div

Bookmarks

Bookmarks

Posting Permissions