CanVas
@CanVas
Веб-мастер

Как правильно выровнять разношёрстные изображения в сетку?

Верстаю сайт по вот этому шаблону шаблон. Шаблон платный, поэтому я только подсматриваю, как там проходит вёрстка. И шаблон адаптивный, и я так же пытаюсь верстать адаптивно... но не всегда выходит.

Вот что у меня пока получилось:
41ca460fa84d48f5becb671e9716c16f.png

Как видно из скрина, картинки разношёрстные. Т.е. есть квадратные, есть вертикальные и горизонтальные.

Какие варианты вижу я:
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;
}
  • Вопрос задан
  • 5166 просмотров
Решения вопроса 1
DeLaVega
@DeLaVega
Верстаю, фронтэндю =)
Поддерживаю ответ с masonry. НО если постараться обойтись одним ксс-ом, то я бы вашим блока задал высоту, и соответствующего размера Line-height. Ну и ещё text-align: center; таким образом у вас картинка выравниться по горизонтали и по вертикали.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
silentvick
@silentvick
jQuery Masonry может решить вашу проблему
Ответ написан
CodeByZen
@CodeByZen
php, js, my/mssql, sqlite, html, css, it-consult
сделать по высоте все картинки 100% от блока.
выровнять картинки по ширине.
ну я бы еще добавил широкий полупрозрачный бордер, чтобы была хоть какая-то однотипность.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы