Flexbox itemy a poměry stran obrázku

27. 12. 2018 14:14:12

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

28027

27. 12. 2018 14:14:12

https://webtrh.cz/diskuse/flexbox-itemy-a-pomery-stran-obrazku#reply1380984

Pavel Mareš

(19 hodnocení)

27. 12. 2018 14:36:31

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

27. 12. 2018 14:36:31

https://webtrh.cz/diskuse/flexbox-itemy-a-pomery-stran-obrazku#reply1380983

Miroslav Foltyn

(3 hodnocení)

27. 12. 2018 16:30:28

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.

27. 12. 2018 16:30:28

https://webtrh.cz/diskuse/flexbox-itemy-a-pomery-stran-obrazku#reply1380982

Ondřej Váško

27. 12. 2018 19:47:17

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.

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

27. 12. 2018 19:47:17

https://webtrh.cz/diskuse/flexbox-itemy-a-pomery-stran-obrazku#reply1380981

Pavel Mareš

(19 hodnocení)

27. 12. 2018 19:51:41

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

27. 12. 2018 19:51:41

https://webtrh.cz/diskuse/flexbox-itemy-a-pomery-stran-obrazku#reply1380980

Miroslav Foltyn

(3 hodnocení)

27. 12. 2018 22:17:32

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

27. 12. 2018 22:17:32

https://webtrh.cz/diskuse/flexbox-itemy-a-pomery-stran-obrazku#reply1380979

Ondřej Váško

28. 12. 2018 00:35:43

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

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

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

Diky, priklady si projdu. Abych vedel pro priste.

28. 12. 2018 00:35:43

https://webtrh.cz/diskuse/flexbox-itemy-a-pomery-stran-obrazku#reply1380978

Pro odpověď se přihlašte.

Přihlásit