Max-width

CSS vlastnost max-width určuje maximální šířku prvku.

max-width
hodnoty šířka prvku
délka nastavená šířka nebo menší
procento procento z šířky nadřazeného prvku (tagu), nebo menší
min-content minimální vlastní šířka obsahu, typicky šířka nejužšího slova
max-content maximální vlastní šířka obsahu, tj. šířka nejdelšího řádku
none maximální šířka není omezena

Šířka prvků je buďto jejich přirozená šířka, 100% dostupné šířky u blokových elementů, nebo šířka určená CSS vlastností width. Vlastnost max-width přináší další způsob, jak šířku prvku předepsat. Uplatní se to zejména v případech, kdy je šířka prvku nastavena procenty nebo závisí na velikosti okna.

Pokud jsou zadány najednou max-width i width a jsou v konfliktu, pak max-width přebije width. Ještě silnější je případné nastavení min-width.

CSS vlastnost max-width se už docela dá používat, protože poslední významný prohlížeč, který nepodporuje max-width, byl Internet Explorer 6 (a ten už lidé nemají, aktualizováno 2011).

Podle specifikace se max-width dá nastavit pouze blokovým prvkům (tedy například odstavcům a divům), nikoli však řádkovým prvkům nebo tabulkám. Různé prohlížeče tuto specifikaci různě ignorují nebo naplňují. Potřebujete-li nastavit maximální šířku řádkovému prvku, je potřeba nastavit mu vlastnost display na hodnotu block (a možná by se mohly chytit i jiné hodnoty). Chcete-li nastavit max-width tabulce (což podle specifikace také není blokový prvek), tak takové nastavení bude sice Explorer a Firefox respektovat, ale například prohlížeč Chrome to bude ignorovat, a proto takovou tabulku doporučuji raději obalit blokovým prvkem <div> a max-width nastavit jemu.

Aby max-width fungovala v Exploreru, je stránku pomocí doctype potřeba přepnout do standardního módu.

Podpora všude

Podpora vlastnosti max-width
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer 7 a novější ano, pouze ve standardním módu  
Mozilla (Firefox, Netscape 6+ atd.) všechny verze dovoluje nastavit max-width i tabulkám
Opera 7, 8, 9  
Chrome ano  

Zaměnitelnost

Pokud někde uvidíte zápis @media (max-width: ..., pak se nejedná o použití této CSS vlastnosti. Ve skutečnosti jde o zápis @media query, který se shodou okolností zapisuje velmi podobně.

Příklady

Příklad na max-width

Priority při konfliktních nastaveních

Následující příklad je zastaralý. Od roku 2011 už takovéto hacky doporučuju nepoužívat.

Simulace max-width pro Internet Explorer s využitím konstrukce expression a podtržítkového hacku, bývala často používaná k tomu, aby se obsah stránky vešel do rozlišení 800x600:

#prvek {
max-width: 780px;
_width: expression(document.body.clientWidth > 780? "780px" : "auto" );
}

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.