0

If i have an image grid in css:

<div class="blockWall">
   <div class="blockWallCell">
      <a href="#">
         <img src="img.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.

maxfridbe
  • 5,872
  • 10
  • 58
  • 80

1 Answers1

0

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?

Marc B
  • 356,200
  • 43
  • 426
  • 500
  • in order for this to fully work i have to create .blockWallCell img.portrait .blockWallCell img.landscape and conditionally know which class to apply to the img based on if its a portraid or a landscape. Which is what I'm trying to avoid. – maxfridbe Jan 14 '11 at 04:11
  • What would the difference between the two style classes be? – Marc B Jan 14 '11 at 05:57
  • max-width: 100px;/* or max-height:100px;*/ – maxfridbe Jan 14 '11 at 05:58
  • `width:100px` sets the width unconditionally to 100px. `max-width` lets the width be any size from 0 -> 100. Do you want variable-sized divs containing the images? – Marc B Jan 14 '11 at 12:58
  • I have my example up on http://maxphotoblog.com/ , my goal is to create a h100xw100 square. take an image h300xw400 and chop off 100px off of width, conversly take an image h400xw300 and chow off 100px off of the height. i do this now by knowing if the image is landscape or portrait. – maxfridbe Jan 14 '11 at 19:59
  • But if you start with a 300x400 image and lop off 100 in width, you're still at 200x400 and overflowing your 100x100 box. So what's the catch? As long as your div is set to `width:100px;height:100px;overflow:hidden`, any image larger than 100x100 will just have the bottom/right sides chopped off and you'll only see the top left 100x100 portion. – Marc B Jan 15 '11 at 01:13