CSS grid: galeria z różnej wielkości obrazków

Question

Witajcie. Mam taką oto galerię: https://jsfiddle.net/ua75rcu8/. Jest ona oczywiście uproszczona i jak najbardziej można zdjęcia zamknąć jeszcze we własne kontenery. Tak często robiłem kiedy chciałem mieć obrazki tej samej wielkości. Ustalałem wielkość daneg kontenera, potem dawałem overflow:hidden i było po sprawie. W tym przypadku chcę jednak żeby szerokość obrazka wynosiła 100% szerokości "kolumny" grida przy jednoczesnym zachowaniu proporcji. Jakieś pomysły?

Answer 1

W takim, przypadku chyba najlepszą opcją, jest edycja każdej grafiki, z osobna, w programie typu: Gimp, Photoshop, i nadanie im odpowiednich wymiarów, z tego, co widzę, to u ciebie rozbija się wszystko, o to, że obrazy mają różną wielkość.

A przeskalować je, tak aby proporcje się zgadzały, przy sztywnym, z góry ustalonej szerokości, niestety ja tego inaczej nie widzę, bez wykadrowania, ale pewnie taka odpowiedź cię nie zadowala.

Answer 2

Zobacz tu - może pomoże :)

Answer 3

A spróbuj może zamiast używać znacznika <img> użyć zwykłych divów, w którym Background będzie tym zdjęciem, nadasz tam wartości typu : background-size:cover; etc etc. Ja tak robię w przypadku flexów, działa jedyny minus jest taki że nie posiadamy title i alt, ale zamiast tego można zrobić tooltipa i wszystko jest idealnie.