Responsivní obrázky v tabulce

/ Blog / CSS / Responsivní obrázky v tabulce

Publikováno v sekci CSS v 12. 2. 2015 - 12:45

aktualizováno

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

  • Osobní názory - 1x
  • PHP - 9x
  • MYSQL - 4x
  • CSS - 6x
  • jQuery - 2x
  • Sociální síť - 1x
  • Nette - 5x
  • Tipy & triky - 3x
  • Twitter Bootstrap - 1x
  • Týdenní tipy a novinky - 4x
  • SCSS - 1x
  • GIT - 1x
  • Gulp - 1x

  • Komentáře (0x)

    Nejsou tu žádné komentáře


    Vložit nový komentář


    • na jiné komentáře odkazujte pomocí odkazu reagovat
    • vaše IP adresa bude zaznamenána
    • používají se gravatary
    • můžeme si tykat
    • HTML tagy vypnuty. PHP kód se také neprovede. Pokud potřebuju přiložit ukázku vašeho kódu, použijete službu pastebin
    • vulgární, rasistické či jinak nepřípustné komentáře budou smazány