CSS Image Grid Filled

If i have an image grid in css:

<div class="blockWall">
   <div class="blockWallCell">
      <a href="#">
         <img src="i开发者_JS百科mg.gif" />
      </a>
   </div>

...blockWallCell repeats

   <div style="clear:both;"></div>
</div>

with css:

.blockWall
{
    width:800px;
}

.blockWallCell
{
    float: left;
    height: 100px;
    overflow: hidden;
    width: 100px;
    padding:4px;
}
.blockWallCell img
{
    border:none;
      max-width: 100px;/* or max-height:100px;*/
    overflow: hidden;
    vertical-align: middle;
}

is there a way via css to make the tag fit the image wholly in the 100x100 .blockWallCell without setting the style of the to max-width:100px; or max-height:100px, i.e. if I don't know if it is a landscape or portrait image. I would like to use the overflow:hidden of the div to chop of the remainder of the non-scaled image.

What you've got right now should do the trick. You'll get a bunch of 100x100 divs with images that will fill as much of the 100x100 space as they can, with any overflowed parts hidden.

Do you want the .blockWallCell to be variable size, maxing out at 100x100? Or do you want the image to stretch out to fill the cell if it's smaller than 100x100 in either dimension?