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

9. 9. 2019 11:05:31

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.

9. 9. 2019 11:05:31

https://webtrh.cz/diskuse/css-tip-jak-vyresit-mezery-mezi-obrazky/#reply1414852

Michal Jeřábek

9. 9. 2019 12:05:41

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

9. 9. 2019 12:05:41

https://webtrh.cz/diskuse/css-tip-jak-vyresit-mezery-mezi-obrazky/#reply1414851

PetrP

9. 9. 2019 12:34:39

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?

9. 9. 2019 12:34:39

https://webtrh.cz/diskuse/css-tip-jak-vyresit-mezery-mezi-obrazky/#reply1414850

Michal Jeřábek

9. 9. 2019 12:51:13

Napsal sipal;1543190
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é. :)

9. 9. 2019 12:51:13

https://webtrh.cz/diskuse/css-tip-jak-vyresit-mezery-mezi-obrazky/#reply1414849

PetrP

9. 9. 2019 15:25:44

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

9. 9. 2019 15:25:44

https://webtrh.cz/diskuse/css-tip-jak-vyresit-mezery-mezi-obrazky/#reply1414848

Miroslav Foltyn

(3 hodnocení)

9. 9. 2019 16:43:30

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

9. 9. 2019 16:43:30

https://webtrh.cz/diskuse/css-tip-jak-vyresit-mezery-mezi-obrazky/#reply1414847

Petr Široký

(26 hodnocení)

9. 9. 2019 18:34:28

Tohle nesouvisí s řešením, ale mohu se zeptat, k čemu ti vlastně bude dobré deformovat obrázky? Víš že tím, co s nimi děláš je neořezáváš, ale splácneš je, ano?

9. 9. 2019 18:34:28

https://webtrh.cz/diskuse/css-tip-jak-vyresit-mezery-mezi-obrazky/#reply1414846

PetrP

10. 9. 2019 10:15:05

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.

10. 9. 2019 10:15:05

https://webtrh.cz/diskuse/css-tip-jak-vyresit-mezery-mezi-obrazky/#reply1414845

Pro odpověď se přihlašte.

Přihlásit