V následujícím příkladu klient přidal obrázek menu do editoru obsahu s pevnou výškou a šířkou.
Obrázek menu byl přidán do hlavního obsahu.
Problém vzniká při zobrazení obrázku na menších zařízeních, kdy se obrázek nes přizpůsobí šířce obrazovky.
Obrázek není responzivní na mobilních zařízeních.
Můžeme také použít obsahové bloky k snadnému přidání obrázku do obsahové oblasti, ale obrázek bude oříznut na krajinu. To znamená, že obrázky ve formátu portrétu ztratí horní a dolní část obrázku, protože budou oříznuty do středu obrázku.
Další informace: - Orientace a poměr stran obrázku
Podívejte se na obrázek menu přidaný do hlavní oblasti obsahu CMS s pevnou šířkou.
Obrázek menu byl přidán do editoru obsahu CMS.
 Pokud chcete zobrazit vlastnosti obrázku, dvakrát klikněte na obrázek a vyberte záložku "Pokročilé". |
 Odstraňte informace o stylu a přidejte třídu "img-responsive" do pole tříd stylopisu. Potvrďte OK. |
Musíte odstranit vložené styly pro šířku a výšku, aby mohl být efektivně použit vlastnosti tříd stylopisu.
Pokud používáte motiv Klimt nebo Magritte, musíte použít třídu stylů img-fluid NAMÍSTO img-responsive.
Obrázek se nyní rozšiřuje na plnou šířku svého kontejneru.
Poznámka: Po správném přidání třídy stylopisu se obrázek nyní naplní prostorem kontejneru a tudíž se bude proporcionálně měnit velikostí obrazovky na webové stránce.
Další informace o responzivních obrázcích naleznete v dokumentaci Bootstrap 3. V tomto příkladu je použito téma "magritte", ale nejnovější téma "klimt" bylo aktualizováno na Bootstrap 4.
Obrázek menu je responzivní na mobilních zařízeních.
|
|
Je také důležité přidat alternativní text k obrázku, což pomůže zlepšit SEO. |
