How to display square images?

Welcome!
The website displays the latest photos from instagram:
https://jsfiddle.net/cjdynwzr/

Can't figure out how to make that the pictures were square. That is, if the photo is horizontal, then the height would need, and the extra right was truncated or have disappeared, but if the picture is vertical, the width would need, and the extra bottom hiding

Thank you
June 27th 19 at 15:25
3 answers
June 27th 19 at 15:27
Solution
1. To replace the img on a div with the style that contains the background-image property:
<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 be replaced on the h320

3. To style to add:
#instafeed a>div {
 background-size: cover;
 height: 100%;
}
thank you!

so everything is OK

s320x320 to replace the h320 does not work, links to images drawn by the script - Austin51 commented on June 27th 19 at 15:30
June 27th 19 at 15:29
try to use instagram api, they have there kind of comes a reference to kripotou picture.
if not, then using some JS-kropelka (tons of them), or you can remove them pressed against each other (like on pinterest) - masonry.desandro.com
hotel will not work - on all other pages of the website displays photos from internal gallery script and they are cropped to square, but thanks anyway - Austin51 commented on June 27th 19 at 15:32
June 27th 19 at 15:31
Found a good solution?

Find more questions by tags CSSHTML