Atrybut CSS image-rendering

Definicja i użycie

image-rendering Atrybut określa typ algorytmu używanego do skalowania obrazów.

Uwaga:Ta właściwość nie działa na obrazach, które nie są skalowane.

Przykład

Pokazuje różne algorytmy dostępne do skalowania obrazów:

.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;
}

Spróbuj sam

Gramatyka CSS

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

Wartość atrybutu

Wartość Opis
auto Pozwala przeglądarce wybrać algorytm skalowania. Domyślna wartość.
smooth Używa algorytmu, aby wygładzić kolory w obrazie.
high-quality Tak samo jak smooth, ale bardziej preferuje jakościowe skalowanie.
crisp-edges Używa algorytmu, aby zachować kontrast i krawędzie w obrazie.
pixelated

Jeśli obraz jest powiększany, używa algorytmu najbliższego sąsiada, więc obraz będzie wyglądał jak złożony z dużych pikseli.

Jeśli obraz jest zmniejszany, działa tak samo jak auto.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: auto
Inheredność: yes
Tworzenie animacji: Nieobsługiwane. Zobacz:Atrybuty związane z animacją.
Wersja: CSS3
Gramatyka JavaScript: object.style.imageRendering="pixelated"

Wsparcie przeglądarki

Liczby w tabeli oznaczają wersje przeglądarek, które w pełni obsługują tę właściwość.

Chrome Edge Firefox Safari Opera
41.0 79.0 65.0 10.0 28.0

Chrome, Edge i Opera używają -webkit-optimize-contrast jako aliasa wartości crisp-edges.