Flexbox itemy a poměry stran obrázku

Zdravím,
mám přehledovou stránku s obrázky, které jsou primárně na šířku, ale vyskytnou se tam i na výšku. Jak je vidět na obrázku, tak obrázek na výšku se roztáhne na plnou šířku.

Mým cílem je mít obrázek na výšku (poslední) stejně vysoký jako na obrázky na šířku. To jsem nyní dosáhnul tím, že jsem obrázku nastavil pevnou výšku (nouzové řešení).

Obalovací div (class ".row") má nastaveno display: flex a tudíž jednotlivé div.reference-list__item mají výšku podle nejvyššího divka (posledního).

Napadá někoho, jak by se dal obrázek zmenšit aby řádka byla stejně vysoká? Přes pevnou výšku obrázku bych to úplně řešit nechtěl. Web je responzivní a používám Bootstrap 4.

Díky za rady

Zmého pohledu vidím jediné řešení a to je "max-height". Protože jinak říct ani nemůžeš, jak má být co velké.

.reference-list .row { justify-content: space-between; /* např., nebo space-around */ }
.reference-list__item { max-height: 100px; }

Ono to samo nevyhodnotí, co a jak má být velké. Leda že bys ty na šířku natáhl na ten na výšku (čímž to bude všechno ale moc velké). Ale to ty dle mého nechceš.

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/...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/respo...mes-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.

Původně odeslal Miroslav Foltýn

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/...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/respo...mes-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.

Tím JS by to bylo asi nejjednodušší z Vámi nabízených variant. Počkám jestli ještě někdo něco neporadí.

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).

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

Původně odeslal Doctore97

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).

Máte pravdu, v CSS to byly 2 radky + osetrit jednotlive breakpointy. To slo taky docela rychle. Takze vyhrala vase varianta pred JS.

---------- Příspěvek doplněn 28.12.2018 v 00:37 ----------

Původně odeslal Miroslav Foltýn

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

Diky, priklady si projdu. Abych vedel pro priste.