Flexbox itemy a poměry stran obrázku

Napsal Miroslav Foltýn;1503316

Máte několik možností jak váš problém řešit:

1) Do sloupců dát div jako kontejner obrázků - tomu nastavit max-height a overflow: hidden, všechny obrázky se budou muset vlézt do kontejneru a nijak se změní (u vysokých by část obrázku navíc prostě nešla viděl - neroztáhl by se ovšem na 100% šířky sloupce tak jak nejspíše chcete).

2) Opět dát do sloupců div jako konejner obrázků a pohrát si object-fit obrázku viz. https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit ~ IE má smůlu, možná najdete nějaký polyfill který object-fit zobrazí pomocí background-image. Lze nastavit aby se obrázek rozáhl do kontejneru a jak, takže by všechny položky byly stejně vysoké a široké. (zhruba to samé lze udělat pomocí background-size a upravením DOMu, ale toto je jednodušší)

3) Pomocí CSS můžete vynutit poměr stran obrázků a nastavit jaká jeho část se má zobrazit viz. https://blog.theodo.fr/2018/01/responsive-iframes-css-trick/ ~ Toto by fungovalo i v IE, ale komplikovanější.

Nejjjednodušší na nastavení bude object-fit (2)), jestli chcete podporu IE, tak najít polyfill.

EDIT: Ještě mě napadlo - nemusíte nic nastavovat v CSS, můžete si zkontrolovat výšky a nastavit si je jak chcete Javascriptem.

Napsal Doctore97;1503349

Vážně? Místo použití max-height (nebo height) a width auto (max 2 nebo 3 řádky v CSS) chcete používat nějaké zbytečné a složité cesty jako JS? Může mi někdo vysvětlit proč?

EDIT: Pomocí JS vzít výšku nejmenšího a všechny nastavit je proč lepší, než to nechat v CSS a v adminu, nebo kde se nahrává obrázek, dát rozmezí a mít klid (popřípadě poučit klienta, jaký obrázky vkládat -> nějaký minimální rozměry).

Napsal Miroslav Foltýn;1503361

Záleží na tom čeho chcete dosáhnout, zmíněné metody jsem kromě 3* + kombinace s JS načrtl zde, pro inspiraci by mělo stačit, na webu ještě ošetřit na změny rozlišení apod.

JS fiddle