Runde Billeder med CSS border-radius

At give billeder en rund form er en populær designtrend, der kan bløde kanterne op og tilføje et unikt visuelt element til din hjemmeside. Den primære CSS-egenskab, der gør dette muligt, er border-radius. Mens det er ret ligetil at anvende effekten på billeder, der allerede er firkantede, kræver rektangulære billeder en smule mere snilde og yderligere CSS-teknikker for at opnå det ønskede cirkulære resultat.

I denne artikel dykker vi ned i, hvordan du bruger border-radius til at forme dine <img> elementer til cirkler. Vi ser på den simple metode for firkantede billeder og udforsker en mere avanceret teknik, der involverer at pakke rektangulære billeder ind i et andet element for at opnå den runde form.

Grundlæggende: border-radius Egenskaben

border-radius er en CSS-egenskab, der lader dig runde hjørnerne på et element. Du kan angive en radius for hvert hjørne individuelt eller bruge en shorthand til at sætte dem alle på én gang. Radius kan angives i forskellige enheder, men når målet er en perfekt cirkel, er procent (%) ofte den mest effektive. Når du sætter border-radius til 50% på et element, vil hjørnerne blive rundet så meget, at de mødes på midten af hver side, forudsat at elementet har lige bredde og højde (altså er et kvadrat). Resultatet er en cirkel.

Sådan runder du Firkantede Billeder

Hvis dit <img> element allerede er et perfekt kvadrat – altså har samme bredde og højde – er det utrolig nemt at gøre det rundt. Du behøver kun én enkelt linje CSS for at forvandle dit kvadratiske billede til en cirkel.

HTML Struktur for Kvadratisk Billede

Start med dit almindelige <img> tag i din HTML:

<img class="cirkulaer--kvadrat" src="kvadrat-billede.png" alt="Et kvadratisk billede" />

Bemærk, at vi har tilføjet en CSS-klasse, cirkulaer--kvadrat, for nemt at kunne style elementet.

CSS for Kvadratisk Billede

Den magiske linje CSS, der gør et kvadrat til en cirkel, er:

.cirkulaer--kvadrat {
 border-radius: 50%;
}

Ved at sætte border-radius til 50% på et element, der er et kvadrat, runder du alle fire hjørner så meget, at kanten følger omkredsen af en cirkel, der er indskrevet i kvadratet. Det er den mest direkte og enkleste metode, når du arbejder med billeder, der allerede har den rette form.

For fuldstændighedens skyld kan border-radius: 50%; også skrives ved at angive radius for hvert hjørne individuelt. Selvom den shorthand er mere almindelig, er det godt at kende den fulde form:

.cirkulaer--kvadrat {
 border-top-left-radius: 50% 50%;
 border-top-right-radius: 50% 50%;
 border-bottom-right-radius: 50% 50%;
 border-bottom-left-radius: 50% 50%;
}

Her angiver de to værdier for hvert hjørne den horisontale og vertikale radius. Når de er ens, som 50% 50%, skaber de en cirkelbue. Når alle fire hjørners radier tilsammen danner en komplet cirkel inden for elementets grænser, får du den ønskede runde form. Dette virker bedst og mest forudsigeligt, når billedet har en ligelig bredde og højde.

Udfordringen med Rektangulære Billeder

Hvad sker der, hvis du anvender border-radius: 50%; direkte på et billede, der er rektangulært (enten bredere end højt, eller højere end bredt)? I stedet for en cirkel vil du få en ellipse (en oval). Dette skyldes, at 50% af bredden er forskellig fra 50% af højden, og afrundingen af hjørnerne vil derfor blive strakt eller komprimeret, så den passer til de forskellige dimensioner.

For at et billede kan se ud som en cirkel, skal det vises inden for et område, der er et perfekt kvadrat, og dette område skal have den runde form. Da rektangulære billeder ikke selv er kvadratiske, er vi nødt til at bruge en anden tilgang.

Løsningen: En Wrapper Div

Tricket til at gøre et rektangulært billede rundt er at pakke det ind i et andet HTML-element, typisk en <div>, som vi kan kontrollere størrelsen og formen på. Vi giver denne indpaknings-<div> en kvadratisk form og anvender derefter border-radius: 50%; på denne<div>. For at billedet indeni ikke skal bryde ud af den runde form på <div>'en, bruger vi CSS-egenskaben overflow: hidden; på <div>'en. Dette skjuler effektivt de dele af billedet, der strækker sig ud over <div>'ens runde grænser.

Det er vigtigt, at indpaknings-<div>'en har samme bredde og højde for at skabe det nødvendige kvadratiske visningsområde. Selve billedet indeni (<img>) skal derefter skaleres korrekt, så det fylder wrapperen uden at miste sit billedformat, og derefter eventuelt positioneres for at sikre, at den vigtigste del af billedet (f.eks. en persons ansigt) er synlig i den runde udskæring.

Håndtering af Liggende Billeder (Landscape)

Liggende billeder er bredere end de er høje. Når du bruger en kvadratisk wrapper til et liggende billede, er billedets bredde typisk større end wrapperens bredde (og højde). For at billedet skal fylde wrapperen vertikalt og bevare sit format, sætter vi billedets højde til 100% og lader bredden justere automatisk.

HTML Struktur for Liggende Billede

<div class="cirkulaer--liggende">
 <img src="billeder/liggende-billede.png" alt="Et liggende billede" />
</div>

CSS for Liggende Billede

Her er CSS'en for wrapperen og det liggende billede indeni:

.cirkulaer--liggende {
 display: inline-block; /* Gør div'en til et inline-blok element */
 position: relative; /* Sætter positioneringskontekst */
 width: 200px; /* Bestemmer wrapperens størrelse */
 height: 200px; /* Gør wrapperen kvadratisk */
 overflow: hidden; /* Skjuler dele af billedet uden for wrapperen */
 border-radius: 50%; /* Gør wrapperen rund */
}

.cirkulaer--liggende img {
 width: auto; /* Lad bredden justere automatisk */
 height: 100%; /* Gør billedets højde lig med wrapperens højde */
 margin-left: -50px; /* Justerer billedets position horisontalt */
}

Wrapperen (.cirkulaer--liggende) sættes til en specifik kvadratisk størrelse (f.eks. 200x200px). overflow: hidden; er essentiel for at beskære billedet til den runde form, som border-radius: 50%; skaber på wrapperen.

For selve billedet (.cirkulaer--liggende img) sættes height: 100%;. Da billedet er liggende, er dets originale bredde større end dets højde. Ved at sætte højden til 100% af wrapperens højde (som er 200px), vil billedet skaleres, så dets nye højde er 200px, og dets bredde vil automatisk skaleres proportionalt (width: auto;), hvilket resulterer i en bredde, der er større end 200px.

Da billedets bredde nu er større end wrapperens bredde, vil det overlappe wrapperen horisontalt. For at forsøge at centrere billedets motiv i den runde udskæring, flytter vi billedet en smule til venstre ved hjælp af en negativ margin-left. Værdien -50px stammer fra eksemplet, hvor wrapperen er 200px bred. 50px er 25% af 200px. Denne justering er baseret på antagelsen, at motivet i liggende billeder ofte er centreret. Ved at skubbe billedet 25% af wrapperens bredde/højde til venstre forsøger man at placere midten af billedet i midten af den runde wrapper.

Værdien for margin-left skal justeres, hvis wrapperens størrelse ændres, eller hvis motivet i billedet ikke er præcist centreret. Denne teknik fungerer bedst, når du kan vælge eller redigere billeder, så motivet er placeret hensigtsmæssigt.

Håndtering af Stående Billeder (Portrait)

Stående billeder er højere end de er brede. Teknikken er den samme som for liggende billeder – brug en kvadratisk wrapper med overflow: hidden; og border-radius: 50%;. Forskellen ligger i, hvordan billedet indeni skaleres.

HTML Struktur for Stående Billede

<div class="cirkulaer--staaende">
 <img src="billeder/staaende-billede.png" alt="Et stående billede" />
</div>

CSS for Stående Billede

Her er CSS'en for wrapperen og det stående billede indeni:

.cirkulaer--staaende {
 position: relative; /* Sætter positioneringskontekst */
 width: 200px; /* Bestemmer wrapperens størrelse */
 height: 200px; /* Gør wrapperen kvadratisk */
 overflow: hidden; /* Skjuler dele af billedet uden for wrapperen */
 border-radius: 50%; /* Gør wrapperen rund */
}

.cirkulaer--staaende img {
 width: 100%; /* Gør billedets bredde lig med wrapperens bredde */
 height: auto; /* Lad højden justere automatisk */
 /* Ingen margin-top nødvendig, baseret på standardantagelse */
}

Wrapperen (.cirkulaer--staaende) er igen et kvadrat (f.eks. 200x200px) med overflow: hidden; og border-radius: 50%;.

For selve billedet (.cirkulaer--staaende img) sættes width: 100%; og height: auto;. Da billedet er stående, er dets originale højde større end dets bredde. Ved at sætte bredden til 100% af wrapperens bredde (200px), vil billedet skaleres, så dets nye bredde er 200px, og dets højde vil automatisk skaleres proportionalt, hvilket resulterer i en højde, der er større end 200px.

I dette tilfælde vil billedet overlappe wrapperen vertikalt. Baseret på antagelsen om, at motivet i stående billeder ofte er placeret i toppen af billedet, behøver vi typisk ikke at justere billedets position vertikalt med en negativ margin, da den øverste del af billedet (hvor motivet forventes at være) allerede er inden for wrapperens synlige område.

Ligesom med liggende billeder, er denne antagelse ikke altid korrekt. Hvis motivet i et stående billede er placeret lavere nede, kan det blive nødvendigt at justere billedets position vertikalt ved hjælp af margin-top eller andre positioneringsteknikker (som f.eks. object-position, selvom det ikke var nævnt i kildematerialet).

Opsummering af Teknikker

At gøre billeder runde med CSS border-radius er en effektiv måde at forme dine billeder på. Den mest ligetil metode er for billeder, der allerede er kvadratiske, hvor en simpel border-radius: 50%; anvendt direkte på <img> elementet er tilstrækkelig. For rektangulære billeder, som er den mere almindelige udfordring, kræves der en wrapper-<div>.

Wrapperen skal være kvadratisk, have overflow: hidden; for at beskære billedet og border-radius: 50%; for at give den runde form. Billedet indeni skal skaleres, så det dækker wrapperen (typisk height: 100%; for liggende og width: 100%; for stående) og kan eventuelt positioneres med negativ margin for at centrere motivet inden for den runde udskæring. Nøgleegenskaben er border-radius kombineret med overflow for beskæring.

Her er en kort opsummering i tabelform:

Denne teknik er mest pålidelig, når motivet i dine rektangulære billeder er centralt placeret (for liggende) eller i toppen (for stående). Hvis motivet er off-center, kan yderligere finjustering af billedets position indeni wrapperen være nødvendig.

Ofte Stillede Spørgsmål (FAQ)

Hvorfor skal border-radius være præcis 50%?

Når border-radius sættes til 50% på et element, der er et perfekt kvadrat (samme bredde og højde), vil radius af hvert hjørne være halvdelen af elementets side. Dette får de afrundede hjørner til at mødes præcis på midten af hver side, hvilket skaber en perfekt cirkelformet kant rundt om elementet.

Kan jeg tilføje en kant (border) til det runde billede?

Ja, det kan du. Du skal anvende border-egenskaben på det element, der har fået border-radius: 50%;. Hvis du bruger wrapper-metoden for rektangulære billeder, skal du altså tilføje kanten til <div>-wrapperen, ikke selve <img> elementet.

Hvad gør overflow: hidden; præcist?

overflow: hidden; er en CSS-egenskap, der styrer, hvad der sker med indhold, der er større end dets container. Når den er sat til hidden, vil alt indhold, der strækker sig ud over containerens grænser, blive klippet væk og ikke være synligt. I vores tilfælde klipper den de dele af det rektangulære billede væk, der falder uden for den runde form på den kvadratiske wrapper.

Hvorfor skal wrapperen være kvadratisk?

For at opnå en perfekt cirkel med border-radius: 50%;, skal elementet, som border-radius anvendes på, være et perfekt kvadrat. Hvis wrapperen var rektangulær, ville border-radius: 50%; på wrapperen resultere i en ellipse, og billedet indeni ville blive klippet til en oval form.

Hvad hvis motivet i mit rektangulære billede ikke er centreret eller i toppen?

De negative margin-værdier (f.eks. margin-left: -50px;) i eksemplerne for rektangulære billeder er baseret på antagelser om motivets placering. Hvis dit motiv er off-center, skal du manuelt justere margin-værdierne (margin-top, margin-bottom, margin-left, margin-right) på billedet indeni wrapperen, indtil motivet er placeret korrekt i den runde udskæring. Dette kræver ofte lidt trial and error.

Hvad gør position: relative; og display: inline-block; på wrapperen?

position: relative; sætter et positioneringsgrundlag for eventuelle absolut positionerede børn (selvom det ikke er strengt nødvendigt for selve overflow: hidden og border-radius til at virke). display: inline-block; gør, at wrapper-<div>'en opfører sig som et element, der kan placeres ved siden af andet inline-indhold (ligesom et billede), men stadig tillader dig at sætte dens bredde og højde (som en blok). Dette er nyttigt, hvis du vil placere flere runde billeder ved siden af hinanden på samme linje.

Afsluttende Bemærkninger

Ved at mestre brugen af border-radius, især i kombination med en indpaknings-<div> og overflow: hidden;, kan du nemt forvandle både kvadratiske og rektangulære billeder til iøjnefaldende cirkulære elementer på din hjemmeside. Husk, at nøglen til en perfekt cirkel på et rektangulært billede ligger i at skabe et kvadratisk visningsvindue omkring det.

Hvis du vil læse andre artikler, der ligner Runde Billeder med CSS border-radius, kan du besøge kategorien Fotografi.