How to make an image resize dynamically as the DIV changes?

Question

I have a situation where i need to set an image in the background of <div> and want it to resize according to the div dynamically. That means the height and width of the <div> can change according to the data on fly. So i want the image to follow the <div> . thanks

Answer 1

You could rely on the CSS background-size property. See this tutorial - they apply it to the body element, but this could work with any <div> . Basically, it would look like this:

.examplediv {
background: url(images/example.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
 }

There are some filters that need to be applied to get IE to behave, but they are mentioned at the bottom of the post.

Answer 2

Resize images using jQuery
http://adeelejaz.com/blog/resize-images-on-fly-using-jquery/

var max_size = 200; 
$("img").each(function(i) { 
  if ($(this).height() > $(this).width()) { 
    var h = max_size;   
    var w = Math.ceil($(this).width() / $(this).height() * max_size);   
  } else {  
    var w = max_size;   
    var h = Math.ceil($(this).height() / $(this).width() * max_size);   
  } 
  $(this).css({ height: h, width: w }); 
});

Answer 3

将图像标记中的width属性设置为100％，因此它将完全驻留在父标记中。