设置多个div大小的随机图像

Question

I have a gallery grid that has four div containers. I want to enclose whatever image inside the divs, keeping in mind that each div box has a different height and width. The should be centered in the div leaving reasonable padding on all sides. Please check the link to get a better understanding JsFiddle http://d.alistapart.com/fluid-images/3-4.png

Any help is highly appreciated. enter code here

 <div id="body">
  <div class="container">
<img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">          
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container h2">
    <img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container h3">
    <img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container w2">
    <img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>

 .container {
  height:100px;
   width: 100px;
  overflow: hidden;
   position: relative;
  margin-bottom: 10px;
  float: left;
  background: #CCC;
   border-radius: 5px;
  cursor: pointer;
   box-shadow: 4px 0 2px -2px rgba(0, 0, 0, 0.4);
     }
  .magic {
   max-width:90%;
   height:70%;
   }
   .h2 {
  height: 210px;
   width: 220px;
    }
  #body {
    margin: 10px;
   }
 .h3 {
  width: 340px;
  height: 210px;
  } 
  .w2 {
    width: 220px;
   }

Answer 1

I'm not sure that i understood your problem... if you use

.magic {
    max-width:100%;
    max-height:100%;
}

with big pictures what is the problem ?

you want them to fill the entire div AND respecting theire size ratio ?

Answer 2

I recommend adding these images as a background-image property to a block-level div, such as:

<div class="container">
    <div class="magic" style="background-image: url(SOURCEHERE.JPG)"></div>
</div>

With additional CSS like:

.container{
    width: 100px; /* or some other width */
    height: 100px; /* or some other height */
    padding:20px; /* this will add a little margin around your image */
    box-sizing:border-box; /* padding will be calculated with the container dimensions */
}

.magic{
    width:100%;
    height:100%;
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    box-sizing:border-box;
}

jsfiddle: http://jsfiddle.net/PDL2U/