Článek je už starý a informace v něm nemusí být relevantní, mohou být zastaralé či dokonce již neplatné.
Články nepíši, informace si poznamenávám jinam, sledovat mě můžete na Githubu, Medium či jiných "IT" síťích.
👋
V případě dotazu mi napište na e-mail či telegram (sekce kontakt).
Pokud potřebujeme mít obrázky plně responsivní, je na to velmi jednoduché pravidlo ... V tabulce toto pravidlo, ale nefunguje. Ukážeme si 2 postupy, které to řeší.
Toto pravidlo nám zajistí zmenšování obrázků, kdy se nám k šířce úměrně zmenšuje
img
{
max-width: 100%;
height: auto;
}
Problém nastane, pokud je obrázek umístěn do tabulky nebo do elementu, který má nastaveno vykreslování jako tabulka (konkrétně display: table / table-cell). Správně se zachová pouze Chrome a Safari, v IE a ve Firefoxu to tak nefunguje. Viz ukázka
Řešení 1
--------
Prvním řešením je nastavit obrázek jako blokový se 100%, `display: block; width: 100%;`
Řešení 2
--------
Nastavit tabulce vlastnost `table-layout: fixed`
Každé řešení se hodí na jinou situaci. Nic lepšího jsem zatím neobjevil. Ale oba způsoby fungují v majoritních prohlížečích (IE 8 - 11, Chrome, Safari, Opera, Firefox)
Víte někdo o dalším řešení?
Kategorie
Komentáře (0x)
Nejsou tu žádné komentáře
Vložit nový komentář
na jiné komentáře odkazujte pomocí odkazu reagovat