Верстаю сайт по вот этому шаблону
шаблон. Шаблон платный, поэтому я только подсматриваю, как там проходит вёрстка. И шаблон адаптивный, и я так же пытаюсь верстать адаптивно... но не всегда выходит.
Вот что у меня пока получилось:
Как видно из скрина, картинки разношёрстные. Т.е. есть квадратные, есть вертикальные и горизонтальные.
Какие варианты вижу я:
1. Запихнуть на фон div'a
2. Как-то исхитриться с разметкой что бы изображения имели ширину 30%, обтекали справа друг друга, и при этом внутри ячейки были выровнены по центру по высоте и по центру по ширине. Также имели max- width и некий max-height (хотя я не понимаю, что в нём указывать).
Html на данный момент:
<div class="vmproduct_gallery productdetails">
<div class=" width33 floatleft">
<div class="spacer">
<a href="/magazin/vspomogatelnoe-oborudovanie/vspomogatelnoe-oborudovanie-i-materialy/silikonovaya-trubka-3-mm-detail.html" title="Силиконовая трубка 3 мм" class="gallery_a">
<img src="/images/stories/virtuemart/product/resized/119_220x220.png" alt="119" class="gallery_img" />
</a>
</div>
</div>
<div class=" width33 floatleft">
<div class="spacer">
<a href="/magazin/vspomogatelnoe-oborudovanie/vspomogatelnoe-oborudovanie-i-materialy/perekhodnik-1-4-kh-1-4-detail.html" title="Переходник 1/4''х 1/4''" class="gallery_a">
<img src="/images/stories/virtuemart/product/resized/116_220x220.png" alt="116" class="gallery_img" />
</a>
</div>
</div>
<!--...-->
</div>
css:
.floatleft {
float: left;
}
.width33 {
width: 33%;
}
.gallery_img {
width: auto;
max-width: 100%;
height: auto;
max-height: 119px;
margin: 0;
padding: 0;
border: none;
line-height: normal;
vertical-align: middle;
}
