Bredd och höjd: bestäm måtten på elementet. CSS - Höjd på ett block i förhållande till dess bredd Vad ingår i bredd och höjd

Exempel

HTML

CSS

Resultat

Tillgänglighetsproblem

Se till att element inställda med en höjd inte trunkeras och/eller inte skymmer annat innehåll när sidan zoomas in för att öka textstorleken.

Specifikationer

Webbläsarkompatibilitet

Kompatibilitetstabellen på den här sidan genereras från strukturerad data. Om du vill bidra till datan, kolla in https://github.com/mdn/browser-compat-data och skicka oss en pull-förfrågan.

Uppdatera kompatibilitetsdata på GitHub

Legend

I den här artikeln kommer vi att titta på hur du i CSS kan ställa in höjden på ett block som en procentandel av dess bredd. Låt oss överväga användningen av denna teknik med hjälp av exemplet att skapa en Bootstrap-karusell (skjutreglage) från bilder av olika storlekar.

Skapa ett block med en höjd som är en viss procent av dess bredd

1. Skapa en HTML-struktur med 2 block:
   Det första blocket har 2 klasser. Med hjälp av den objektresponsiva klassen kommer vi att ställa in blockets relativa positionering. Detta måste göras så att block 2 (som kommer att ha absolut positionering) är placerat i förhållande till det. Dessutom används denna klass även för att lägga till ett pseudoelement:before före innehållet i motsvarande element (item-responsive). Detta element kommer att ställa in den nödvändiga blockhöjden i förhållande till dess bredd med hjälp av padding-top CSS-egenskapen. Tricket med den här metoden är att om padding-egenskapen är inställd på inte i pixlar, utan som en procentandel, då beräknas den av webbläsaren i förhållande till dess bredd. På så sätt kan du få ett block med önskad höjd. Nästa steg är att ge block 2 en absolut position och rikta in den mot det första blocket.
2. Lägg till följande CSS-kod på sidan: .item-responsive ( position: relativ; /* relativ positionering */ ) .item-responsive:before ( display: block; /* visa elementet som ett block */ content: "" ; /* innehåll pseudo-element */ bredd: 100%; /* elementets bredd */ ) .item-16by9 ( padding-top: 56,25%; /* (9:16)*100% */ ) .item-responsive >.content ( position: absolut; /* elementets absoluta position */ /* elementets position */ topp: 0; vänster: 0; höger: 0; botten: 0; ) /* Om nödvändigt (för block som har dessa klasser) */ .item -4by3 ( padding-top: 75%; /* (3:4)*100% */ ) .item-2by1 ( padding-top: 50%; /* (1:2) *100% */ ) .item -1by1 (padding-top: 100%; /* (1:1)*100% */ )

Använd tekniken ovan för att skapa en Bootstrap-karusell

Om du inte är bekant med Bootstrap och vill veta vad det är kan du använda artikeln Introduktion till Bootstrap.

Låt oss titta på ett exempel där vi kommer att använda ovanstående HTML-struktur och CSS-kod för att visa Bootstrap-karusellbilder.

Vi kommer att använda följande filer som bilder:

• carousel_1.jpg (bredd = 736px, höjd = 552px, bildförhållande (höjd till bredd) = 1,33);
• carousel_2.jpg (bredd = 1155px, höjd = 1280px, bildförhållande (höjd till bredd) = 0,9);
• carousel_3.jpg (bredd = 1846px, höjd = 1028px, bildförhållande (höjd till bredd) = 1,8);
• carousel_4.jpg (bredd = 1140px, höjd = 550px, bildförhållande (höjd till bredd) = 2,07);
• carousel_5.jpg (bredd = 800px, höjd = 600px, bildförhållande (höjd till bredd) = 1,33);

Vi kommer att ställa in bilderna som bakgrund. Detta gör att du kan använda 3 bilder med olika bildförhållande i din Bootstrap-karusell.

HTML-uppmärkning av karusellen:

Karusell CSS-kod:

Item-responsive ( position: relativ; /* relativ positionering */ ) .item-responsive:before ( display: block; /* visa elementet som ett block */ innehåll: ""; /* pseudo-element innehåll */ bredd : 100%; /* elementbredd */ ) .item-16by9 ( padding-top: 56,25%; /* (9:16)*100% */ ) .item-responsive>.content (position: absolut; /* elementets absoluta position * / /* elementposition */ topp: 0; vänster: 0; höger: 0; botten: 0; bakgrundsstorlek: omslag !viktigt; )

De flesta element i HTML ges vanligtvis en specifik höjd och bredd. Att ställa in dessa parametrar i CSS är ganska enkelt och som ett resultat praktiskt. För detta används de höjd- och breddegenskaper som du redan känner till. Men i den här lektionen kommer vi också att prata om icke-fixerad bredd och höjd eller gummi, det vill säga beroende på själva fönstrets bredd. Låt oss börja)

bredd

Mitt kvarter(
bredd: 400px; /* bredd 400 pixlar */

}
Eller i procent:

MyBlockPercent50 (
bredd: 50%; /* bredd 50 % av blockets eller fönstrets bredd (om inte inuti ett block med fast bredd) */
färg: #f1f1f1; /* ljusgrå block */
}
Följaktligen får vi ett block som alltid kommer att vara halva bredden på föräldern.

Nu om den mest intressanta delen. width har parametrar som anger maximal eller minsta bredd. Dessa är egenskaperna för min-bredd respektive maxbredd. Du kan också ange värden för dem i pixlar, procent och andra värden. Dessa egenskaper är grunden för att skapa flytande och adaptiva mönster ().

Exempel på responsiv design. Titta, ändra storlek på webbläsarfönstret:

Självklart gick jag före mig själv. Men du måste förstå vad som behövs och varför. Ja, och rör det trevliga resultatet)

Som du redan förstått kan du med hjälp av dessa egenskaper mer flexibelt hantera element på sidan utan att förvränga innehållet. Hur det fungerar? Låt oss titta på koden.

Blockera (
max-bredd: 800px;
bakgrundsfärg: #f1f1f1; /* ljusgrå block */
stoppning: 20px;
}
Ett block med dessa egenskaper med en överordnad bredd på 200 pixlar kommer att ta motsvarande värde, men om det överordnade blocket är större, till exempel 1000 pixlar, kommer det redan att ta sin maximala bredd, det vill säga 800 pixlar. Det vill säga, det kommer att öka tills bredden på det överordnade blocket är 801 pixlar eller mer. Vidare kommer blockblocket alltid att ha sin maximalt tillåtna bredd på 800 pixlar.

höjd

Info (
höjd: 200px; /* blockhöjd kommer att vara 200 pixlar */
stoppning: 10px; /* upprepa om indrag inuti blocket =) */
}
Vilket är logiskt, för höjd kan du ange minsta och maximala höjdvärden för ett element med egenskaperna min-höjd och maxhöjd.

Info (
maxhöjd: 360px; /* maximal blockhöjd */
min-höjd: 120px; /* minsta blockhöjd */
}
Som du kan se kan och bör egenskaper ofta användas i par.
Eller kombinera värden:

Innehåll (
höjd: 100%; /* höjd kommer alltid att vara 100 % */
bredd: 760px; /* men bredden är fast 760 pixlar */
}
Om du har några frågor, skriv i kommentarerna!

Tack för din uppmärksamhet! Lycka till med layouten!)

För att ett objekt ska få en specifik bredd och höjd finns det två egenskaper i CSS - bredd respektive höjd. Med deras hjälp kan du ställa in fasta storlekar för element, vare sig det är en sidofält, bild, tabell eller vilket block som helst.

Funktioner för att beräkna bredd och höjd

Du kan använda valfri längdenhet i CSS för att definiera bredden eller höjden på ett objekt. Pixlar är lättast att förstå. Om du använder procentnotation, kom ihåg att bredden på objektet beror på bredden på dess överordnade. Om det inte finns någon, beräknas elementets bredd baserat på bredden på webbläsarfönstret (om användaren ändrar fönstrets bredd kommer breddvärdet att beräknas om).

Du kan också använda em-enheten som breddvärde, vilket är ungefär detsamma som teckenstorleken för texten, men bara i konventionella enheter. Till exempel ställer du in teckensnittsstorleken till 24px. Då blir 1em för detta element lika med 24px, och om du ställer in bredd: 2em så blir bredden 2x24px = 48 pixlar. Om teckensnittsstorleken inte är inställd kommer den att ärvas.

Höjd, angiven i procent, beräknas på samma sätt som bredd, men beräkningen baseras på höjden på det överordnade elementet snarare än dess bredd. Om det inte finns någon förälder kommer höjden att bero på höjden på webbläsarfönstret.

Det underordnade elementets procentuella bredd och höjd beräknas baserat på det överordnade elementets mått

Vad ingår i bredd och höjd

Det är värt att komma ihåg omedelbart att egenskaperna för bredd och höjd har en egenhet - de inkluderar inte värdena för marginal, stoppning och kant. Värdet du anger för bredd/höjd kommer bara att indikera bredden/höjden på elementets innehållsområde.

Så för att till exempel kunna beräkna den faktiska bredden på ett element (utrymmet som det faktiskt kommer att uppta på skärmen), krävs lite aritmetik. Den faktiska bredden är summan av värden som bredd, utfyllnad, ram och marginal. Kom ihåg att vi tidigare tittat på hur CSS-boxmodellen ser ut.

För att befästa kunskapen kommer vi att visa ett exempel. Låt oss säga att du har ett element med den här stilen:

Bredd: 200px; marginal-vänster: 15px; marginal-höger: 15px; padding-vänster: 10px; kant-vänster: 3px fast #333;

För att beräkna den faktiska bredden på elementet, utför tillägget:

bredd + marginal-vänster + marginal-höger + utfyllnad-vänster + kant-vänster = 200px + 15px + 15px + 10px + 3px = 243px (faktisk bredd)

Egenskapen höjd kan vara användbar om du behöver kontrollera exakt, till exempel, höjden på en bild. Men om behållaren kommer att innehålla text eller annat innehåll som kan variera i höjd, rekommenderas det starkt inte att ställa in en fast höjd för behållaren, eftersom en sådan layout kan leda till ett oväntat resultat - innehållet kommer att visas överst av annat innehåll.

Istället för en fast höjd, använd höjd: auto - denna post betyder att höjden på objektet kommer att beräknas automatiskt, beroende på innehållet det innehåller.

Ett annat sätt att undvika layoutkollaps är att använda overflow: auto notation. I det här fallet, om höjden på innehållet överstiger höjden på dess behållare, kommer webbläsaren att lägga till en rullningslist till behållaren.

I nästa lektion kommer du att lära dig hur du kan åsidosätta bredden på ett element med hjälp av en intressant och mycket användbar egenskap