CSS - tip jak vyřešit mezery mezi obrázky?

Měl by prosím někdo tip jak vyřešit mezery mezi obrázky v https://codepen.io/Sipal/pen/NWKyedL ? Problém je, že img nastavím height na 50%, ale kontejner ho stejně bere jako vysoký 100%. CSS není moje silná stránka, předpokládám že to bude nějaká trivialita. Případně jiný postup, jak obrázky s různou velikostí a různě dlouhým popiskem vyscalovat na poměr 2:1 zarovnané seřadit za sebe a pod sebe. Díky.

Metoda s padding-bottom pro vytvoření elementu, který zachovává poměr stran.

Díky moc, funguje. Ale je to teda magie. Jestli máš minutu, mohl bys popsat co to vlastně dělá, abych to jen slepě nekopíroval ale taky pochopil?

Původně odeslal sipal ↪

Díky moc, funguje. Ale je to teda magie. Jestli máš minutu, mohl bys popsat co to vlastně dělá, abych to jen slepě nekopíroval ale taky pochopil?

Na div.image se vygeneruje pseudoelement pomocí ::after. Tomu se nastaví výška pomocí padding-bottom v procentuální hodnotě. Procenta se počítají ze šířky elementu i přesto, že se jedná o jeho výšku (padding-bottom: 100% tak vytvoří čtverec). Nastavuje se tím, kolik procent šířky má být element vysoký (šlo by na to použít i padding-bottom: calc(100% * (1 / 2)) nebo například calc(100% * (9 / 16))). Ten pseudoelement vytvoří prostor v zadaném poměru stran a přes tento prostor je pak potřeba ten obrázek roztáhnout. To znamená, že musíme div.image nastavit jako relativní a obrázek jako absolutní (čímž se vyjme z toku dokumentu) a roztáhnout ho přes ten prostor.

Snad je to alespoň trochu srozumitelné. :)

Tak už je to menší magic :) Tohle už vstřebám, díky moc.

Taky stojí za to se pozastavit nad tím, proč vám to vlastně fungovalo, jak to fungovalo.

Polopatě:

1) .col-4 elementy nemají nastavenou výšku
2) prohlížeč si tedy řekne: hmmm, tak se mrkneme jaká je výška obsahu .col-4
3) první co vidí je obrázek s "width: 100%; height: 50%;", zná šířku rodiče (.col-4), takže bez problému nastaví width: 100%.
4) co dělat s "height: 50%"? Má to nastavit na 50% čeho? Procentuální výška elementu je vždy relativně k rodiči, jenže když ji rodič nemá nastavenou, tak má dělat co? Nastaví si ji dočasně na "auto" a pokračuje s procesem dál
5) až projde všechny potomky .col-4, tak konečně může znát výšku .col-4, nastaví si ji
6) a až teď může rozluštit tu vaši "height: 50%;" na potomkovi - nastaví tedy obrázek na 50% výšky svého rodiče, jenže rodiči zůstává výška spočtená dříve s pomocným "height: auto"

Za zmínku stojí také to, že řešení s object-fit vám nebude fungovat v IE - takže pokud nechcete polyfill, bude třeba buďto přejít k background-size: cover (což není sémantické a nejspíše tak bude fungovat onen polyfill) , či jinou metodu pomocí kombinace absolutní pozicování + marginu + minimálních proporcí.

Dík moc za analýzu. Já to pak celé dám nějakému frontenďákovi, ale teď potřebuju demo, a nejrychlejší je udělat to sám. I když je to trochu boj.

Mimochodem, jestli freelancujete a máte zájem o zakázku, tak jste právě prošli výběrovým řízením :) Termínově to vidím na přelom roku, možná spíš začátek 2020. Teď budeme řešit grafiku, takže implementace ještě chvíli nebude aktuální. Pošlete kdyžtak PM, dodám podrobnosti.