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

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

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

Спасибо
  • Вопрос задан
  • 251 просмотр
Решения вопроса 1
Vadiok
@Vadiok
Веб разработчик
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%;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
fnnzzz
@fnnzzz
front-end dev
попробуй заюзать instagram api, у них там вроде приходит ссылочка на кропнутую картинку.
если нет, то юзать какую-нибудь JS-кропалку (их тонны) или можно выводить их прижатыми друг другу (как на пинтерест) - masonry.desandro.com
Ответ написан
Ваш ответ на вопрос

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

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