CSS Image Сетка Заполненный

Question

Если у меня есть сетка изображения в CSS:

<div class="blockWall"> 
    <div class="blockWallCell"> 
     <a href="#"> 
     <img src="img.gif" /> 
     </a> 
    </div> 

... blockWallCell повторяющий

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

с 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; 
} 

есть способ с помощью css, чтобы тег соответствовал изображению целиком в 100x100 .blockWallCell без установки стиля max-width: 100px; или max-height: 100px, т. е. если я не знаю, является ли это пейзажным или портретным изображением. Я хотел бы использовать переполнение: скрытый от div, чтобы нарезать оставшуюся часть немасштабированного изображения.

Answer 1

То, что у вас есть сейчас, должно сделать трюк. Вы получите кучу 100x100 div с изображениями, которые заполнят как можно больше пространства 100x100, при этом скрытые скрытые части будут скрыты.

Вы хотите, чтобы .blockWallCell был переменным размером, максимальным на 100x100? Или вы хотите, чтобы изображение растягивалось, чтобы заполнить ячейку, если она меньше 100x100 в любом измерении?