Как выводить картинки квадратными?

Question

[Григорий]

Приветствую!
На сайт выводятся последние фотографии из инстаграмма:
https://jsfiddle.net/cjdynwzr/

Никак не могу придумать, как сделать, что бы фотографии были квадратными. То есть, если фотка горизонтальная, то высота становилась бы нужной, а лишнее справа обрезалось или скрывалось, а если картинка вертикальная, то ширина становилась бы нужной, а лишнее снизу скрывалось

Спасибо

Answer 1

[Влад Токарев]

1. Заменить img на div со стилем, содержащим свойство background-image:

<div id="instafeed">	
	<a href="https://www.instagram.com/p/BSatZ5vlseZ/">
		<div style="background-image: url('//scontent.cdninstagram.com/t51.2885-15/h320/e35/17494632_706228799557215_3777011797928706048_n.jpg"></div>
	</a>
</div>

2. s320x320 заменить на h320

3. В стиль дописать:

#instafeed a>div {
    background-size: cover;
    height: 100%;
}

Comments

[Григорий]

спасибо!

так все ок

s320x320 заменить на h320 не получится, ссылки на картинки вытягиваются скриптом

Answer 2

[Vlad Feninets]

попробуй заюзать instagram api, у них там вроде приходит ссылочка на кропнутую картинку.
если нет, то юзать какую-нибудь JS-кропалку (их тонны) или можно выводить их прижатыми друг другу (как на пинтерест) - masonry.desandro.com

Comments

[Григорий]

масонри не подойдет - на всех остальных страницах сайта выводятся фотографии из внутренней галереи и они скриптом обрезаются до квадратных, но все равно спасибо