Home/ Questions/Q 7659947
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T13:24:00+00:00

This is what I need: The image must completely fill 100% the area the

  • 0

This is what I need:

  • The image must completely fill 100% the area the div covers – left to
    right and top to bottom.
  • the image must not be squashed or streched – just be cropped or
    must overflow.
  • The image must be kept as small as possible, so whatever the resize – you
    can still see either the very sides OR the very top and bottom.

The div itself will be adjusting in height and width as both are a percentage of the main window.

I have found a little bit of JavaScript here that is manipulating the image just how I want when the window is resized, but is displaying it in the whole window.

<html> 
<head> 
<title>test</title> 

<script type="text/javascript"> 

function resizeImage() 
{ 
    var window_height = document.body.clientHeight 
    var window_width  = document.body.clientWidth 
    var image_width   = document.images[0].width 
    var image_height  = document.images[0].height 
    var height_ratio  = image_height / window_height 
    var width_ratio   = image_width / window_width 
    if (height_ratio > width_ratio) 
    { 
        document.images[0].style.width  = "100%" 
        document.images[0].style.height = "auto" 
    } 
    else 
    { 
        document.images[0].style.width  = "auto" 
        document.images[0].style.height = "100%" 
    } 
} 
</script> 

</head> 

<body onresize="resizeImage()"> 

<img onload="resizeImage()" src="f/a.jpg">   

</body> 
</html>

Here is a demo

Please don’t just answer that all I need is: 

<img style="width : 100%;">

This is so much more than that.

It’s not too easy to explain but check the demo and drag the corner of the window around and that’ll be worth 1000 words…!

Can it (or something like it) be made to work the same way within a % sized div?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I wrote a jQuery plugin that does exactly this. Check out my blog post here and the demo here

    jQuery.fn.resizeToParent = function(options) {
  var defaults = {
   parent: 'div'
  }

  var options = jQuery.extend(defaults, options);

  return this.each(function() {
    var o = options;
    var obj = jQuery(this);

    // bind to load of image
    obj.load(function() {
      // dimensions of the parent
      var parentWidth = obj.parents(o.parent).width();
      var parentHeight = obj.parents(o.parent).height();

      // dimensions of the image
      var imageWidth = obj.width();
      var imageHeight = obj.height();

      // step 1 - calculate the percentage difference between image width and container width
      var diff = imageWidth / parentWidth;

      // step 2 - if height divided by difference is smaller than container height, resize by height. otherwise resize by width
      if ((imageHeight / diff) < parentHeight) {
       obj.css({'width': 'auto', 'height': parentHeight});

       // set image variables to new dimensions
       imageWidth = imageWidth / (imageHeight / parentHeight);
       imageHeight = parentHeight;
      }
      else {
       obj.css({'height': 'auto', 'width': parentWidth});

       // set image variables to new dimensions
       imageWidth = parentWidth;
       imageHeight = imageHeight / diff;
      }

      // step 3 - center image in container
      var leftOffset = (imageWidth - parentWidth) / -2;
      var topOffset = (imageHeight - parentHeight) / -2;

      obj.css({'left': leftOffset, 'top': topOffset});
    });

    // force ie to run the load function if the image is cached
    if (this.complete) {
      obj.trigger('load');
    }
  });
}

    And if you want the image to resize when the window is resized, just bind a resize handler to the window:

    $(window).resize(function() {
    $('img').resizeToParent();
});
    • 0