Obrázek obsahu není responzivní na mobilních zařízeních.

Webové stránky Smart využívají populární responzivní framework nazývaný bootstrap. Pomocí názvů tříd můžeme udělat obrázky responzivní.

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.

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.

Obrázek menu je responzivní na mobilních zařízeních.