Jak mít obrázky responzivní


Jestli - tak jako já - máte zálibu ve velkých obrázcích, určitě vás také dokáže vytočit k nepříčetnosti, když vám váš extra velký obrázek vyčuhuje z prostoru pro příspěvky a nedej bože, když zasahuje až do postranního menu.

V dnešním návodu si ukážeme jednoduchý trik, díky kterému už vám obrázky nikdy vyčnívat nebudou, a dokonce se budou i přizpůsobovat okolnímu místu.

Otevřete si autorskou část svého blogu a na kartě "Šablona" vyberte "Personalizovat". V "Pokročilém" nastavení najděte "Přidat CSS" a zkopírujte do něj tento kód:
img {
  max-width: 95%;
  height: auto;
}
Procenta si můžete libovolně upravovat. 100% bude znamenat, že obrázek vyplní celou šířku - tedy bude maximálně stejně široký jako váš text. A ještě malý tip na závěr: s maximální šířkou 100% je lepší obrázky zarovnat doleva místo na střed.

To bude pro dnešní návod vše. Pokud můj malý tip vyzkoušíte, budu ráda, když mi v komentářích dáte vědět, jak to dopadlo, a s dalším návodem se budu těšit přístí neděli.

3 komentáře:

  1. Také mám ráda velké fotky, takže za tento návod moc děkuji. Hned jsem vyzkoušela a super. Už má (skoro) všechny fotky upraveny a nemůžu se vynadívat :D Těším se na další návod :)

    OdpovědětVymazat
  2. Responzivní znamená, že se design správně zobrazuje na všech zařízeních i přes různé velikosti displeje (je přizpůsobený pro zobrazení například na mobilu, tabletu i desktopu). Tenhle tvůj návod je prostě úprava šířky obrázku.

    OdpovědětVymazat
    Odpovědi
    1. Nikde jsem nenapsala, že tento návod je na responzivní design celého blogu, týká se pouze obrázků. Ale i ty mohou být responzivní a přizpůsobovat se místu, které mají k dispozici (a je jedno, jestli to je na počítači, notebooku, tabletu nebo mobilu, responzivní obrázek se vždy přispůsobí).

      Vymazat