SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Auto resize image to fill container div

    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

  2. #2
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,876
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    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

  4. #4
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gktareen View Post
    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.

  6. #6
    SitePoint Member
    Join Date
    Aug 2012
    Location
    Taiwan
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,876
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    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)
      });
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •