CSS aspect-ratio en object-fit, met focuspuntkiezer
Gids voor CSS aspect-ratio en object-fit
CSS aspect-ratio en object-fit: live demo's en Tailwind | We.Inc
Zet vakken vast op een verhouding met aspect-ratio en pas foto's erin met object-fit cover, contain, fill, none of scale-down. Klik om met object-position een focuspunt te kiezen.
Twee eigenschappen lossen de meeste problemen met afbeeldingsformaten op. aspect-ratio: 16 / 9 laat een vak die vorm houden bij elke breedte, en vervangt de oude padding-top-hack. object-fit bepaalt hoe een img of video dat vak vult: cover snijdt bij, contain laat balken over, fill rekt uit. object-position kiest welk deel zichtbaar blijft als cover bijsnijdt.
Snel overzicht
Doel
CSS
Tailwind
Vierkant vak
aspect-ratio: 1
Videovorm
aspect-ratio: 16 / 9
Elke verhouding
aspect-ratio: 4 / 3
aspect-4/3 or aspect-[4/3]
Vullen en bijsnijden
object-fit: cover
Alles tonen
object-fit: contain
De bovenkant behouden
object-position: top
Hieronder staat één testafbeelding in een vak dat u van vorm kunt veranderen. Wissel tussen de vijf object-fit-waarden, klik op de afbeelding om het focuspunt te verplaatsen en kopieer de CSS of de Tailwind-klassen. Verderop: de padding-hack naast aspect-ratio, responsieve video-embeds en kaartrasters met gelijke thumbnails.
Kies een verhouding voor het vak en een object-fit-waarde. De preview toont precies wat de browser bijsnijdt of uitrekt.
Met cover of none geselecteerd klikt u ergens op de testafbeelding om object-position op dat punt te zetten.
Kopieer de gegenereerde CSS, of de Tailwind-klassen die hetzelfde doen.
Gebruik de recepten voor kaartrasters en video hieronder wanneer u echte layouts bouwt.
Zet altijd width- en height-attributen op img-tags. Browsers maken er een beeldverhouding van voordat het bestand laadt, zodat de layout niet verspringt.
Kies cover voor thumbnails en hero-foto's, contain voor logo's en productfoto's waar niets mag wegvallen.
Valt een gezicht steeds buiten beeld, verschuif object-position er dan naartoe in plaats van het afbeeldingsbestand opnieuw bij te snijden.
aspect-ratio is een voorkeursvorm, geen kooi. Lange tekst in het vak maakt het hoger, tenzij u min-height: 0 of overflow instelt.
Veelgestelde vragen
Wat is het verschil tussen aspect-ratio en object-fit?
aspect-ratio geeft het vak zelf zijn vorm, voor elk element. object-fit geldt alleen voor vervangen inhoud zoals img, video en canvas, en bepaalt hoe die inhoud binnen het vak wordt getekend. Meestal gebruikt u beide: aspect-ratio op de afbeelding om de vorm vast te leggen, object-fit: cover zodat de afbeelding het vak vult.
Waarom doet object-fit niets?
Het afbeeldingsvak heeft dezelfde verhouding als de afbeelding, dus er valt niets bij te snijden of uit te rekken. object-fit maakt pas verschil zodra het vak een andere vorm heeft, bijvoorbeeld een vaste hoogte plus width: 100%, of een aspect-ratio die afwijkt van het bestand.
Heb ik de padding-top-hack nog nodig?
Niet voor huidige browsers. aspect-ratio werkt sinds 2021 in Chrome, Edge, Firefox en Safari. Houd de hack alleen aan als u oudere browsers moet ondersteunen, en controleer caniuse voor uw publiek.
Werkt object-fit op achtergrondafbeeldingen?
Nee. Voor CSS-achtergronden zijn de tegenhangers background-size: cover of contain, en background-position voor het focuspunt. object-fit is voor echte img- en video-elementen, die beter zijn voor inhoudelijke afbeeldingen omdat ze alt-tekst dragen en srcset ondersteunen.
Kan aspect-ratio op een div worden gebruikt?
Ja. Elk element kan het krijgen. Een div met width: 100% en aspect-ratio: 1 wordt een vierkant dat meegroeit met de kolom, handig voor kaartplaceholders, avatars en skeleton loaders.
Hoe de browser aspect-ratio uitrekent
De verhouding werkt pas als één afmeting automatisch is. Stel een breedte in en laat height op auto, dan berekent de browser de hoogte uit de verhouding. Stelt u zowel breedte als hoogte in, dan wordt de verhouding genegeerd, want er valt niets meer uit te rekenen.
De waarde auto 3 / 2 betekent: gebruik de natuurlijke verhouding van het element als die er is, zoals bij een geladen afbeelding, en val terug op 3 / 2 voordat die laadt of als er geen is. Precies zo gedragen width- en height-attributen op img zich achter de schermen.
Een focuspunt kiezen
object-position accepteert dezelfde waarden als background-position: trefwoorden zoals top of right, percentages of lengtes. 50% 50% is de standaard en houdt het midden. Een percentage lijnt dat punt van de afbeelding uit met hetzelfde punt van het vak, dus 30% 40% houdt het gebied een derde vanaf links en iets boven het midden in beeld.
Sla in een contentsysteem het focuspunt per afbeelding op als twee percentages en schrijf het in een inline style. Elke uitsnede op de site houdt het onderwerp dan in beeld, welke verhouding de layout ook gebruikt.
aspect-ratio naast de padding-hack
Vóór aspect-ratio kreeg een vak zijn vorm van padding-top als percentage, omdat verticale padding-percentages ten opzichte van de breedte worden gemeten. Het werkt, maar de inhoud moet er absoluut in worden gepositioneerd. Beide vakken hieronder zijn 16:9.
Oud en nieuw, hetzelfde resultaat
56.25% is 9 gedeeld door 16. De moderne versie heeft één regel nodig en laat de inhoud normaal doorlopen.
Alle vijf object-fit-waarden op dezelfde foto
De afbeelding is 3:2 en elk vak is vierkant, dus elke waarde moet met een afwijking omgaan en de verschillen zijn duidelijk te zien.
object-fit-waarden
Waarde
Wat er gebeurt
Tailwind
Rekt de afbeelding uit tot het vak. De standaard voor img en video. Vervormt als de verhoudingen verschillen.
Schaalt de hele afbeelding zodat die binnen het vak past. Laat lege balken over (letterboxing) als de verhoudingen verschillen.
Schaalt de afbeelding tot het vak gevuld is en snijdt wat uitsteekt af. Geen vervorming, geen balken, een deel van de afbeelding valt weg.
Houdt de afbeelding op natuurlijke grootte en snijdt af wat niet past. Goed om een detail op 1:1 te tonen.
Gedraagt zich als none of contain, welke het kleinste resultaat geeft. Vergroot een kleine afbeelding nooit.
fill, contain, cover, none, scale-down
Dezelfde afbeelding van 300 bij 200 in vijf vierkanten van 110 pixels. Let op de rode stip: dat is het onderwerp dat cover niet mag kwijtraken.
Responsieve video en embeds
Een iframe in YouTube-stijl dat 16:9 houdt
Geef het iframe width 100% en een aspect-ratio. Geen wrapper-div en geen absolute positionering nodig.
Kaartrasters met gelijke thumbnails
Elke thumbnail dezelfde vorm
Uploads komen in alle vormen. aspect-ratio plus object-fit: cover maakt het raster netjes zonder één bestand te bewerken.
Tailwind-klassen voor verhouding en passing
Tailwind v4-utilities (bekijk de v3-documentatie als u een oudere versie gebruikt)
CSS
Tailwind
aspect-ratio: 1 / 1
aspect-ratio: 16 / 9
aspect-ratio: auto
aspect-ratio: 3 / 2
aspect-3/2 (v4) or aspect-[3/2]
object-fit: cover / contain / fill
object-cover / object-contain / object-fill
object-fit: none / scale-down
object-none / object-scale-down
object-position: center / top / bottom
object-center / object-top / object-bottom
object-position: 30% 40%
object-[30%_40%]
Rekt de afbeelding uit tot het vak. De standaard voor img en video. Vervormt als de verhoudingen verschillen.
Schaalt de hele afbeelding zodat die binnen het vak past. Laat lege balken over (letterboxing) als de verhoudingen verschillen.
Schaalt de afbeelding tot het vak gevuld is en snijdt wat uitsteekt af. Geen vervorming, geen balken, een deel van de afbeelding valt weg.
Houdt de afbeelding op natuurlijke grootte en snijdt af wat niet past. Goed om een detail op 1:1 te tonen.
Gedraagt zich als none of contain, welke het kleinste resultaat geeft. Vergroot een kleine afbeelding nooit.
Speelveld voor verhouding, passing en focuspunt
Bronafbeelding (3:2). Klik erop, of geef haar focus en gebruik de pijltjestoetsen, om het focuspunt te kiezen.
Focuspunt kiezen, nu {pos}
Testlandschap met een rode stip als onderwerp
Terug naar het midden
Resultaat in een {ratio}-vak met object-fit: {fit}
Verhouding van het vak
Het focuspunt doet er het meest toe bij cover en none. Bij contain of scale-down bepaalt het waar de lege balken komen.
CSS kopiëren
Klassen kopiëren
Hebt u het exacte pixelformaat voor een verhouding nodig? Gebruik de