Autor Zpráva
hypot
Profil
Zdravím,
marně si lámu hlavu nad následujícím:

Mám strukturu
<div>
<img>
<p></p>
</div>
DIV má nastaveno display: inline-flex; flex-direction: column; justify-content: space-between, aby vložený obrázek byl umístěný u horní hrany a odstavec (popisek obrázku) u dolní hrany. Obrázek má nastaveno max-width: 100%, aby se přizpůsobil velikosti divu (který má pevné rozměry) a zároveň se zachoval poměr jeho stran. Pokud se do divu vloží obrázek orientovaný na šířku, je vše v pořádku, pokud se však vloží obrázek orientovaný na výšku, obrázek přeteče dolů přes DIV a vytlačí dolů i odstavec P.
Situaci zachycuje následující odkaz: na první "kartičce" je bezproblémová situace s obrázkem orientovaným na šířku. Jestliže u obrázku orientovaného na výšku nechci, aby přetekl přes DIV, musím mu nastavit maximální výšku, jenže tím se zároveň zdeformuje, jak ukazuje druhá "kartička". Potřeboval bych to udělat tak, jak je na třetí zobrazené "kartičce", to znamená zachovat poměry stran obrázku a jeho spodní přesahující část oříznout. Na třetím obrázku jsem toho docílil použitím CSS vlastnosti clip, kvůli čemuž jsem musel vložený obrázek i odstavec absolutně pozicovat. Což se mi líbí o trochu méně než flexbox, ale hlavní problém je v tom, že jsem se dočetl, že vlastnost clip je zastaralá a její podpora může kdykoli v budoucnu být z prohlížečů odebrána (třebaže zatím je všude). Takže bych chtěl pro jistotu - abych to v budoucnu nemusel předělávat - stejného výsledku docílit nějak jinak, jenže mě nenapadá jak. Tedy, ne že by nenapadlo, jednoduché by bylo do DIV vložit další DIV s pevnými rozměry a s nastaveným overflow-y: hidden a teprve do něj vložit obrázek, jenže já chci uchovat strukturu
<div>
<img>
<p></p>
</div>
do níž se žádný další prvek přidávat nebude.
Děkuji za případné rady.
Keeehi
Profil
Pozicování je v tomto případě dobrý způsob. A na oříznutí není clip potřeba. Živá ukázka

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: