In dit artikel bekijken we hoe je in CSS de hoogte van een blok kunt instellen als percentage van de breedte. Laten we het gebruik van deze technologie eens bekijken aan de hand van het voorbeeld van het maken van een Bootstrap-carrousel (schuifregelaar) uit afbeeldingen van verschillende formaten.

Een blok maken met een hoogte die een bepaald percentage van de breedte bedraagt

1. Maak een HTML-structuur van 2 blokken:
   Het eerste blok bestaat uit 2 klassen. Met behulp van de item-responsieve klasse zullen we de relatieve positionering van het blok instellen. Dit moet zo worden gedaan dat blok 2 (dat een absolute positionering zal hebben) er relatief ten opzichte van ligt. Daarnaast wordt deze klasse ook gebruikt om een ​​pseudo-element:before toe te voegen vóór de inhoud van de overeenkomstige elementen (item-responsive). Dit element stelt de vereiste blokhoogte in ten opzichte van de breedte ervan met behulp van de CSS-eigenschap opvulling-top. De truc van deze methode is dat als de eigenschap opvulling is ingesteld op niet in pixels, maar als percentage, dan wordt het door de browser berekend in verhouding tot de breedte. Zo krijg je een blok met de gewenste hoogte. De volgende stap is om blok 2 een absolute positie te geven en uit te lijnen met het eerste blok.
2. Voeg de volgende CSS-code toe aan de pagina: .item-responsive ( position: relatief; /* relatieve positionering */ ) .item-responsive:before ( display: block; /* toon het element als een blok */ content: "" ; /* inhoud pseudo-element */ breedte: 100%; /* elementbreedte */ ) .item-16by9 (opvulling-top: 56,25%; /* (9:16)*100% */ ) .item-responsive >.content ( position: absoluut; /* absolute positie van het element */ top: 0; rechts: 0; bottom: 0; /* Indien nodig (voor blokken die deze klassen hebben) -4by3 ( padding-top: 75% ; /* (3:4)*100% */ ) .item-2by1 ( opvulling bovenaan: 50%; /* (1:2)*100% */ ) .item -1by1 ( opvulling bovenaan: 100% ; /* (1:1)*100% */ )

Gebruik de bovenstaande technologie om een ​​Bootstrap-carrousel te maken

Als u niet bekend bent met Bootstrap en wilt weten wat het is, kunt u het artikel Inleiding tot Bootstrap gebruiken.

Laten we eens kijken naar een voorbeeld waarin we de bovenstaande HTML-structuur en CSS-code gebruiken om Bootstrap-carrouseldia's weer te geven.

We gebruiken de volgende bestanden als afbeeldingen:

• carousel_1.jpg (breedte = 736px, hoogte = 552px, beeldverhouding (hoogte tot breedte) = 1,33);
• carousel_2.jpg (breedte = 1155px, hoogte = 1280px, beeldverhouding (hoogte tot breedte) = 0,9);
• carousel_3.jpg (breedte = 1846px, hoogte = 1028px, beeldverhouding (hoogte tot breedte) = 1,8);
• carousel_4.jpg (breedte = 1140px, hoogte = 550px, beeldverhouding (hoogte tot breedte) = 2,07);
• carousel_5.jpg (breedte = 800px, hoogte = 600px, beeldverhouding (hoogte tot breedte) = 1,33);

We zullen de afbeeldingen als achtergrond instellen. Hierdoor kunt u 3 afbeeldingen met ongelijke beeldverhoudingen in uw Bootstrap-carrousel gebruiken.

HTML-opmaak van de carrousel:

Carrousel CSS-code:

Item-responsive ( position: relatief; /* relatieve positionering */ ) .item-responsive:before ( display: block; /* het element weergeven als een blok */ content: ""; /* pseudo-element content */ width : 100%; /* elementbreedte */ ) .item-16by9 ( opvulling-top: 56,25%; /* (9:16)*100% */ ) .item-responsive>.content ( positie: absoluut; /* absolute positie van het element * / /* elementpositie */ boven: 0; links: 0; achtergrondgrootte: cover !belangrijk)

Standaard gebruiken blokelementen autowidth. Dit betekent dat het element horizontaal precies zo ver wordt uitgerekt als er vrije ruimte is. De standaardhoogte van blokelementen wordt automatisch ingesteld, d.w.z. De browser rekt het inhoudsgebied verticaal uit, zodat alle inhoud wordt weergegeven. Om aangepaste afmetingen in te stellen voor het inhoudsgebied van een element, kunt u de eigenschappen width en height gebruiken.

Met de CSS-eigenschap width kunt u de breedte van het inhoudsgebied van het element instellen, en met de eigenschap height kunt u de hoogte van het inhoudsgebied instellen:

Houd er rekening mee dat de eigenschappen width en height alleen de grootte van het inhoudsgebied bepalen; bereken de totale breedte van een blokelement. U moet de breedte van het inhoudsgebied, de linker- en rechtervulling en de breedte van de linker- en rechteropvulling toevoegen. rechter grens. Hetzelfde geldt voor de totale hoogte van het element, alleen worden alle waarden verticaal berekend:

Voor deze paragraaf stellen we alleen de breedte en hoogte in.

Deze paragraaf bevat naast breedte en hoogte een binnenvulling, een rand en een buitenvulling.

Poging "

Uit het voorbeeld blijkt duidelijk dat het tweede element meer ruimte in beslag neemt dan het eerste. Als we berekenen met onze formule, zijn de afmetingen van de eerste alinea 150x100 pixels en zijn de afmetingen van de tweede alinea:

Totale hoogte:	5px	+	10px	+	100px	+	10px	+	5px	= 130px
	bovenkant kader		bovenste inkeping		hoogte		lager inkeping		lager kader

dat wil zeggen, 180x130 pixels.

Elementoverloop

Nadat u de breedte en hoogte van een element heeft bepaald, moet u op één belangrijk punt letten: de inhoud in het element kan de opgegeven blokgrootte overschrijden. In dit geval zal een deel van de inhoud de grenzen van het element overschrijden. Om dit onaangename moment te voorkomen, kunt u de CSS-overflow-eigenschap gebruiken. De overflow-eigenschap vertelt de browser wat hij moet doen als de inhoud van een blok de grootte ervan overschrijdt. Deze eigenschap kan een van de volgende vier waarden aannemen:

• zichtbaar - de standaardwaarde die door de browser wordt gebruikt. Het instellen van deze waarde heeft hetzelfde effect als het niet instellen van de overflow-eigenschap.
• scrollen - voegt verticale en horizontale schuifbalken toe aan een element.
• auto - voegt indien nodig schuifbalken toe.
• verborgen - verbergt een deel van de inhoud dat verder reikt dan de grenzen van het blokelement.

De meeste elementen in HTML krijgen doorgaans een specifieke hoogte en breedte. Het instellen van deze parameters in CSS is vrij eenvoudig en daardoor praktisch. Hiervoor wordt gebruik gemaakt van de reeds bij u bekende hoogte- en breedte-eigenschappen. In deze les zullen we het echter ook hebben over niet-vaste breedte en hoogte of rubber, dat wil zeggen afhankelijk van de breedte van het raam zelf. Laten we beginnen)

breedte

Deze eigenschap stelt een specifieke breedte in voor het HTML-element. De waarde kan worden opgegeven in pixels, percentages (andere waarden worden minder vaak gebruikt).

MijnBlok(
breedte: 400px; /* breedte 400 pixels */

}
Of als percentage:

MijnBlokPercent50 (
breedte: 50%; /* breedte 50% van de breedte van het blok of venster (indien niet binnen een blok met vaste breedte) */
kleur: #f1f1f1; /* lichtgrijs blok */
}
Dienovereenkomstig krijgen we een blok dat altijd de helft van de breedte van de ouder zal zijn.

Nu over het meest interessante deel. breedte heeft parameters die de maximale of minimale breedte specificeren. Dit zijn respectievelijk de eigenschappen min-width en max-width. U kunt er ook waarden voor opgeven in pixels, percentages en andere waarden. Deze eigenschappen vormen de basis voor het creëren van vloeiende en adaptieve ontwerpen ().

Responsief ontwerpvoorbeeld. Kijk, het formaat van het browservenster wijzigen:

Natuurlijk liep ik voorop. Maar je moet begrijpen wat er nodig is en waarom. Ja, en raak het aangename resultaat aan)

Zoals u al heeft begrepen, kunt u met behulp van deze eigenschappen flexibeler omgaan met elementen op de pagina zonder de inhoud te vervormen. Hoe werkt dit? Laten we naar de code kijken.

Blok (
maximale breedte: 800px;
achtergrondkleur: #f1f1f1; /* lichtgrijs blok */
opvulling: 20px;
}
Een blok met deze eigenschappen met een ouderbreedte van 200 pixels zal de overeenkomstige waarde aannemen, maar als het ouderblok groter is, bijvoorbeeld 1000 pixels, dan zal het al de maximale breedte aannemen, dat wil zeggen 800 pixels. Dat wil zeggen, het zal toenemen totdat de breedte van het ouderblok 801 pixels of meer is. Verder zal het blokblok altijd de maximaal toegestane breedte van 800 pixels hebben.

hoogte

Deze eigenschap is verantwoordelijk voor de hoogte van het element. De gebruikte waarden zijn dezelfde die geschikt zijn voor CSS. Meestal dezelfde percentages en pixels.

Info (
hoogte: 200px; /* de blokhoogte is 200 pixels */
opvulling: 10px; /* herhaal over inspringen binnen het blok =) */
}
Dat is logisch: voor hoogte kun je de minimale en maximale hoogtewaarden opgeven voor een element met respectievelijk de eigenschappen min-height en max-height.

Info (
maximale hoogte: 360px; /* maximale blokhoogte */
min-hoogte: 120px; /* minimale blokhoogte */
}
Zoals u kunt zien, kunnen eigenschappen vaak in paren worden gebruikt.
Of combineer waarden:

Inhoud (
hoogte: 100%; /* hoogte is altijd 100% */
breedte: 760px; /* maar de breedte is vast 760 pixels */
}
Als je vragen hebt, schrijf dan in de reacties!

Bedankt voor uw aandacht! Veel succes met de indeling!)