Příklad

HTML

CSS

Výsledek

Problémy s dostupností

Zajistěte, aby prvky nastavené s výškou nebyly zkráceny a/nebo nezakrývaly jiný obsah, když je stránka přiblížena, aby se zvětšila velikost textu.

Specifikace

Kompatibilita s prohlížečem

Tabulka kompatibility na této stránce je generována ze strukturovaných dat. Pokud byste chtěli přispět k datům, podívejte se na https://github.com/mdn/browser-compat-data a pošlete nám žádost o stažení.

Aktualizujte údaje o kompatibilitě na GitHubu

Legenda

Dobrý den, milí čtenáři! Dnes se podíváme na to, jak nastavit velikost prvků bloku na webové stránce pomocí vlastností CSS a nakonfigurovat zobrazení obsahu, pokud se do prvku nevejde.

šířka a výška - šířka a výška prvků v css

Pomocí atributů stylu width a height můžete nastavit šířku a výšku prvků bloku, v tomto pořadí:

šířka: auto|<ширина>|zdědit
výška: auto|<ширина>|zdědit

Jako hodnoty můžete použít jakékoli měrné jednotky dostupné v css – například pixely (px), palce (in), body (pt) atd.:

p (šířka:200px; výška:150px)

Kromě absolutních jednotek můžete nastavit relativní velikost prvků v procentech. V tomto případě bude šířka a výška prvku záviset na šířce a výšce nadřazeného prvku. Pokud není nadřazený objekt výslovně zadán, budou rozměry záviset na okně prohlížeče.

div (šířka: 40 %;)

Auto ponechává kontrolu nad velikostí prvků na webovém prohlížeči a je výchozí hodnotou. V tomto případě budou rozměry prvku takové, aby se do něj zcela vešel celý jeho obsah.

Podívejme se na pár příkladů.

Výsledek:

V tomto příkladu jsme vytvořili div a vnořili odstavec p s textem uvnitř. U divu jsme striktně nastavili rozměry na 300 x 300 pixelů. Prvek p má hodnoty vlastností width a height rovné auto, takže jak můžete vidět na snímku obrazovky, jeho šířka je nastavena stejně jako šířka nadřazeného prvku a jeho výška je taková, že se do něj vejde veškerý text obsažený v odstavec.

Nyní změníme nastavení css pro odstavec p a nastavíme pevné rozměry:

Vrstva2 (
pozadí: #eee;
šířka:250px;
}

Výsledek:

Jak vidíte, šířka odstavce se zúžila a rovná se 250 pixelům a jeho výška se zvětšila tak, aby se text vešel, protože parametr výška zůstal stejný jako auto.

Nyní nastavíme výšku a šířku odstavce v procentech:

Vrstva2 (
pozadí: #eee;
šířka: 50 %;
výška: 50 %;
}

Výsledek:

Jak můžete vidět na obrázku, šířka prvku p se rovná polovině šířky prvku div. A výška se zvětšila a rovnala se 75 procentům výšky div.

Při zadávání šířky a výšky jakýchkoli prvků v relativních jednotkách může být nutné zadat minimální a maximální možné velikosti. Koneckonců například při změně velikosti okna prohlížeče se rozměry prvku mohou zmenšit a zvětšit na takovou velikost, že čitelnost webu bude velmi nízká.

Minimální šířku a výšku můžete definovat pomocí atributů min-width a min-heigh:

min-šířka:<ширина>
minimální výška:<высота>

Podobné atributy stylu max-width a max-height umožňují nastavit maximální velikosti:

max. šířka:<ширина>
Maximální výška:<высота>

Je jasné, že při nastavení maximální a minimální hodnoty pro výšku a šířku nemohou být rozměry prvku větší než maximální a menší než minimální hodnoty.

Stojí za to objasnit, že úkol parametry výška a šířka mají smysl pouze pro blokové značky, protože pro vložené prvky tyto parametry prohlížeč nezpracovává.

Může se stát, že při nastavení pevných parametrů pro výšku a šířku prvku se obsah, který obsahuje, nemusí vejít do omezené oblasti.

Zmenšeme například velikost odstavce p z výše uvedených příkladů na 100 pixelů:

Vrstva2 (
pozadí: #eee;
šířka:100px;
výška:100px;
}

Výsledek:

Jak vidíte, text přesáhl hranice odstavce a nevypadá to moc hezky. Aby k takovým situacím nedocházelo, existuje pravidlo CSS – přetečení.

Parametr přetečení pro skrytí (skryté, viditelné) nebo posouvání (posouvání, automatické) obsahu

Přetečení obsahu může nastat, když je omezena šířka i výška prvku. Podívejme se na dva odstavce:

Text prvního odstavce

Text druhého odstavce

Výsledek:

Vzhledem k tomu, že u odstavců není zadána šířka ani výška, prohlížeč je vypočítá nezávisle na základě vlastního pochopení hodnoty auto. V důsledku toho odstavce zabíraly veškerý dostupný prostor na šířku a na výšku v souladu s obsahem, který obsahovaly.

Nyní omezme šířku prvního odstavce:

Text prvního odstavce

Text druhého odstavce

Výsledek:

Očekávaně byla zmenšena šířka odstavce a výška byla nastavena tak, aby vyhovovala celému textu.

Nyní omezme výšku prvního odstavce:

Text prvního odstavce

Text druhého odstavce

Ve výsledku se ukázalo, že text se do takto omezeného odstavce nevešel, a proto zabíhal do oblasti spodního souseda. Proto je prakticky nemožné přečíst text v prvním nebo druhém odstavci. Je to kontrola chování obsahu v takových situacích, které existují pravidlo přetečení:

přetečení: viditelný|skrytý|posouvání|auto|zdědit

Ve výchozím nastavení je přetečení nastaveno na viditelné, což prohlížeči říká, že má zobrazit obsah, který se nevejde do kontejneru. Výsledek je vidět na příkladu výše.

Pravidlo skryje vše, co se nevejde do kontejneru:

Hodnota posouvání zobrazí na prvku svislé a vodorovné posuvníky, i když se veškerý obsah vejde:

Text prvního odstavce

Text druhého odstavce

Nejoblíbenějším a nejlogičtějším řešením, pokud potřebujete vytvořit posuvníky pro kontejner, je hodnota auto. V tomto případě prohlížeč sám určí, kdy a na kterých osách má zobrazovat posuvníky:

Text prvního odstavce

Text druhého odstavce

Výsledek:

Pro přizpůsobení posuvníků lze také použít atributy stylu overflow-x a overflow-y, které umožňují přizpůsobit zobrazení rolování na jednotlivých osách. Je tedy odpovědný za horizontální osa, a pro vertikální osa.

Pokud tedy například potřebujete, aby se horizontální rolování nikdy neobjevilo v odstavci a vertikální rolování, aby se zobrazovalo pouze v případě potřeby, pak stačí napsat následující css pravidlo:

p(overflow-x:hidden;overflow-y:auto;)

A problém bude vyřešen.

To je vše. Do příště. Nezapomeňte se přihlásit k odběru aktualizací blogu a budu vděčný, pokud použijete tlačítka sociálních sítí.

Výška a šířka prvku jsou vypočítaná množství. Každý prvek webové stránky tvoří obdélníkovou oblast, která se zase skládá z několika oblastí - obsahové oblasti, oblasti polstrování, rámové oblasti A polní oblastiživel.

Mezi obsahem prvku a jeho okrajem jsou odsazení výplň, mimo hranice prvku - pole okraj . Oblast obsahu existuje pro každý prvek, ostatní oblasti jsou volitelné.

1. Výška prvku

Vlastnost height určuje výšku obsahu prvku bloku a nemá žádný vliv na vložené prvky display: inline; . Výška vložených prvků se rovná výšce jejich obsahu. Záporné hodnoty nejsou povoleny. Nemovitost se nedědí.

Syntax

P (výška: 100px;)

2. Šířka prvku

Vlastnost width určuje šířku obsahu prvku bloku a nemá žádný vliv na vložené prvky display: inline; . Šířka vložených prvků se rovná šířce jejich obsahu. Záporné hodnoty nejsou povoleny. Nemovitost se nedědí.

Syntax

P (šířka: 100px;)

3. Výška a šířka absolutně umístěného prvku

Nastavte šířku a výšku absolutně umístěné pozice prvku: absolutní; není vždy nutné, protože v tomto případě jsou výška a šířka implicitně určeny odsazením prvku. Pokud má prvek specifikované okraje a okraje, zmenší velikost oblasti obsahu o příslušné hodnoty.

Div ( pozadí: #6A7690; pozice: absolutní; nahoře: 0; dole: 0; vlevo: 50 %; vpravo: 0; ) /*v tomto případě je výška prvku 100 %, šířka je 50 % rodičovský blok*/
Rýže. 2. Výška a šířka absolutně umístěného prvku

4. Polstrování prvků

Pomocí vlastnosti padding můžete nastavit odsazení současně pro několik stran prvku v následujícím pořadí: . Pokud má prvek pozadí, použije se také na výplň. Záporné hodnoty nejsou povoleny. Nemovitost se nedědí.

Pokud jsou zadány tři hodnoty, například div (odsazení: 10px 20px 30px;), budou distribuovány v následujícím pořadí: první hodnota je horní odsazení, druhá je odsazení vpravo a vlevo, třetí je spodní polstrování.
Pokud jsou zadány dvě hodnoty, například div (odsazení: 10px 20px;), pak první nastaví horní a spodní odsazení, druhá nastaví pravou a levou.
Jediná hodnota, například div (padding: 10px;) , nastaví stejné odsazení na všech stranách prvku.

Syntax

P (odsazení: 5px 10px 15px 10px;)

4.1. Polstrování na jedné straně prvku

Chcete-li nastavit odsazení pouze na jedné straně prvku, musíte použít některou z vlastností padding-top , padding-right , padding-bottom , padding-left , například:

P (odsazení vlevo: 10px;)

5. Okraje prvku

Většina prvků je od sebe oddělena okraji. Vlastnost margin je krátký formulář pro záznam polí prvku v následujícím pořadí: nahoře, vpravo, dole, vlevo. Používá se, když potřebujete nastavit okraje na několika stranách, ale ne nutně na čtyřech. Svisle sousedící okraje prvků bloku jsou sbalené a horní a dolní okraje nemají žádný vliv na vložené prvky. Záporné hodnoty jsou povoleny. Nemovitost se nedědí.

Pokud jsou zadány tři hodnoty, například div (okraj: 10px 20px 30px;), pak budou distribuovány v následujícím pořadí: první hodnota je horní okraj, druhá je pravý a levý okraj, třetí je spodní okraj.
Pokud jsou zadány dvě hodnoty, například div (margin: 10px 20px;), pak první nastaví horní a dolní okraj, druhá nastaví pravý a levý.
Jediná hodnota, například div (margin: 10px;) , nastaví stejné okraje na všech stranách prvku.

(margin: 0 auto;) bude fungovat pouze v případě, že je explicitně specifikována šířka prvku.

Syntax

Div (okraj: 5px 10px 2px 5px;)

5.1. Okraje na jedné straně prvku

Vlastnosti margin-top , margin-right , margin-bottom , margin-left řídí odpovídající okraje na každé straně prvku, například:

P (levý okraj: 10px;)

6. Omezení šířky a výšky

CSS také podporuje několik dalších vlastností souvisejících s nastavením výšky a šířky prvků webové stránky: min-height, min-width, max-height a max-width. Tyto vlastnosti umožňují nastavit minimální a maximální hodnoty šířky nebo výšky prvku, což prvku umožňuje vyplnit dostupný prostor. Vlastnosti se často používají pro responzivní design webových stránek. Platí pro všechny prvky kromě vložených a tabulkových prvků. Přicházejí vždy po hlavním pravidle, tzn. po zadání výšky nebo šířky prvku . Neděděno.

Můžete určit běžné rozměry pomocí některých jednotek měření a omezení velikosti pomocí jiných jednotek, například:

Div ( šířka: 400 pixelů; max. šířka: 50 %; )

Prvek bude mít šířku 400px pouze v případě, že tato hodnota nepřesáhne 50 % šířky bloku kontejneru, jinak se jeho šířka zmenší.

V tomto článku se podíváme na to, jak v CSS můžete nastavit výšku bloku v procentech jeho šířky. Uvažujme o použití této technologie na příkladu vytvoření Bootstrap karuselu (posuvníku) z obrázků různých velikostí.

Vytvoření bloku s výškou, která je určitým procentem jeho šířky

1. Vytvořte HTML strukturu ze 2 bloků:
   První blok má 2 třídy. Pomocí třídy reagující na položku nastavíme relativní umístění bloku. To musí být provedeno tak, aby blok 2 (který bude mít absolutní polohu) byl umístěn relativně k němu. Kromě toho se tato třída také používá k přidání pseudo-elementu:before před obsah odpovídajících prvků (item-responsive). Tento prvek nastaví požadovanou výšku bloku vzhledem k jeho šířce pomocí vlastnosti CSS padding-top. Trik této metody spočívá v tom, že pokud je vlastnost padding nastavena na ne v pixelech, ale v procentech, pak to prohlížeč vypočítá vzhledem k jeho šířce. Tímto způsobem můžete získat blok s požadovanou výškou. Dalším krokem je udělit bloku 2 absolutní polohu a zarovnat jej s prvním blokem.
2. Přidejte na stránku následující kód CSS: .item-responsive ( position: relativní; /* relativní umístění */ ) .item-responsive:before ( display: block; /* zobrazení prvku jako bloku */ content: "" ; /* pseudoelement obsahu */ šířka: 100 %; /* šířka prvku */ ) .item-16by9 ( padding-top: 56,25 %; /* (9:16)*100 % */ ) .item-responsive >.obsah ( poloha: absolutní; /* absolutní poloha prvku */ /* poloha prvku */ nahoře: 0; vlevo: 0; vpravo: 0; dole: 0; ) /* V případě potřeby (u bloků, které mají tyto třídy) */ .item -4by3 ( padding-top: 75 %; /* (3:4)*100 % */ ) .item-2by1 ( padding-top: 50 %; /* (1:2) *100 % */ ) .item -1by1 ( padding-top: 100 %; /* (1:1)*100 % */ )

Použití výše uvedené technologie k vytvoření kolotoče Bootstrap

Pokud Bootstrap neznáte a chcete vědět, co to je, můžete použít článek Úvod do Bootstrapu.

Podívejme se na příklad, ve kterém použijeme výše uvedenou strukturu HTML a kód CSS k zobrazení snímků karuselu Bootstrap.

Jako obrázky použijeme následující soubory:

• carousel_1.jpg (šířka = 736px, výška = 552px, poměr stran (výška k šířce) = 1,33);
• carousel_2.jpg (šířka = 1155px, výška = 1280px, poměr stran (výška k šířce) = 0,9);
• carousel_3.jpg (šířka = 1846px, výška = 1028px, poměr stran (výška k šířce) = 1,8);
• carousel_4.jpg (šířka = 1140px, výška = 550px, poměr stran (výška k šířce) = 2,07);
• carousel_5.jpg (šířka = 800px, výška = 600px, poměr stran (výška k šířce) = 1,33);

Nastavíme obrázky jako pozadí. To vám umožní použít 3 obrázky s nestejnými poměry stran v karuselu Bootstrap.

HTML označení karuselu:

Carousel CSS kód:

Item-responsive ( position: relativní; /* relativní umístění */ ) .item-responsive:before ( display: block; /* zobrazení prvku jako bloku */ content: ""; /* pseudo-obsah prvku */ šířka : 100 %; /* šířka prvku */ ) .item-16by9 ( padding-top: 56,25 %; /* (9:16)*100 % */ ) .item-responsive>.content ( pozice: absolutní; /* absolutní pozice prvku * / /* pozice prvku */ nahoře: 0; vlevo: 0; vpravo: 0; dole: 0; velikost pozadí: obal !important; )

Aby objekt dostal určitou šířku a výšku, existují v CSS dvě vlastnosti – šířka a výška (v tomto pořadí). S jejich pomocí můžete nastavit pevné velikosti prvků, ať už jde o postranní panel, obrázek, tabulku nebo jakýkoli blok.

Funkce výpočtu šířky a výšky

K definování šířky nebo výšky objektu můžete v CSS použít libovolnou jednotku délky. Pixely jsou nejsnáze pochopitelné. Pokud používáte procentuální zápis, mějte na paměti, že šířka objektu bude záviset na šířce jeho rodiče. Pokud žádná není, pak se šířka prvku vypočítá na základě šířky okna prohlížeče (pokud uživatel změní šířku okna, hodnota šířky se přepočítá).

Jako hodnotu šířky můžete také použít jednotku em, která je přibližně stejná jako velikost písma textu, ale pouze v konvenčních jednotkách. Například nastavíte velikost písma na 24 pixelů. Pak se 1em pro tento prvek bude rovnat 24px, a pokud nastavíte šířku: 2em, bude šířka 2x24px = 48 pixelů. Pokud není velikost písma nastavena, bude zděděna.

Výška zadaná v procentech se vypočítá stejným způsobem jako šířka, ale výpočet je založen na výšce nadřazeného prvku, nikoli na jeho šířce. Pokud neexistuje žádný rodič, bude výška záviset na výšce okna prohlížeče.

Procento šířky a výšky podřízeného prvku se vypočítá na základě rozměrů nadřazeného prvku

Co je zahrnuto v šířce a výšce

Je třeba si hned připomenout, že vlastnosti width a height mají zvláštnost - nezahrnují hodnoty margin , padding a border . Hodnota, kterou nastavíte pro šířku/výšku, bude znamenat pouze šířku/výšku oblasti obsahu prvku.

Aby bylo možné vypočítat například skutečnou šířku prvku (místo, které skutečně zabere na obrazovce), je zapotřebí trochu aritmetiky. Skutečná šířka je součtem hodnot, jako je šířka , odsazení , ohraničení a okraj . Připomeňme, že jsme se dříve podívali na to, jak vypadá model CSS boxu.

Pro upevnění znalostí si ukážeme příklad. Řekněme, že máte prvek s tímto stylem:

Šířka: 200px; margin-left: 15px; pravý okraj: 15px; padding-left: 10px; border-left: 3px solid #333;

Chcete-li vypočítat skutečnou šířku prvku, proveďte přidání:

šířka + okraj-levý + okraj-pravý + padding-left + okraj-levý = 200px + 15px + 15px + 10px + 3px = 243 pixelů (skutečná šířka)

Vlastnost height může být užitečná, pokud potřebujete přesně ovládat například výšku obrázku. Pokud však kontejner bude obsahovat text nebo jakýkoli jiný obsah, který se může lišit ve výšce, důrazně se nedoporučuje nastavit pevnou výšku kontejneru, protože takové rozložení může vést k neočekávanému výsledku – obsah se zobrazí nahoře. jiného obsahu.

Místo pevné výšky použijte height: auto - tento údaj znamená, že výška objektu bude vypočítána automaticky v závislosti na obsahu, který obsahuje.

Dalším způsobem, jak se vyhnout zhroucení rozvržení, je použít přetečení: automatický zápis. V tomto případě, pokud výška obsahu přesahuje výšku jeho kontejneru, prohlížeč přidá do kontejneru posuvník.

V další lekci se dozvíte, jak můžete přepsat šířku prvku pomocí zajímavé a velmi užitečné vlastnosti