CSS image-rendering egenskap

Definition and usage

image-rendering Egenskapen specificerar den algoritm som används för bildskalning.

Observera:Detta egenskap har ingen effekt på obeskalerta bilder.

Exempel

Visar olika algoritmer som kan användas för bildskalning:

.image {
  height: 100px;
  width: 100px;
  image-rendering: auto;
}
.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.pixelated {
  image-rendering: pixelated;
}
.smooth {
  image-rendering: smooth;
}
.high-quality {
  image-rendering: high-quality;
}

Prova själv

CSS-syntaks

image-rendering: auto|smooth|high-quality|crisp-edges|pixelated|initial|inherit;

Egenskapsvärde

Värde Beskrivning
auto Låt webbläsaren välja skalningsalgoritmen. Standardvärde.
smooth Använd en algoritm för att sudda ut färgerna i bilden
high-quality Samma som smooth, men föredrar högkvalitativ skalning
crisp-edges Använd en algoritm för att behålla kontrast och kanter i bilden
pixelated

Om bilden förstors, använd närmaste grannalgoritmen, så bilden kommer att se ut som om den är sammansatt av stora pixlar.

Om bilden minskas, är det samma som auto.
initial Sätt detta egenskap till dess standardvärde. Se till: initial.
inherit Följande från sitt föräldrelement. Se till: inherit.

Tekniska detaljer

Standardvärde: auto
Arv: ja
Animation tillverkning: Stöds inte. Se till:Animation relaterade egenskaper.
Version: CSS3
JavaScript-syntaks: object.style.imageRendering="pixelated"

Webbläsarstöd

Tal i tabellen representerar den första webbläsarens version som helt stöder detta egenskap.

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome, Edge och Opera använder -webkit-optimize-contrast som alias för crisp-edges-värdet.