ویژگی CSS image-rendering

تعریف و استفاده

image-rendering این ویژگی نوع الگوریتم‌های استفاده شده برای بزرگنمایی تصاویر را مشخص می‌کند.

توجه:این ویژگی برای تصاویر بدون بزرگنمایی بی‌اثر است.

مثال

الگوریتم‌های مختلفی که برای بزرگنمایی تصاویر استفاده می‌شوند را نشان می‌دهد:

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

خودتان امتحان کنید

نوع دستور زبان CSS

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

مقدار ویژگی

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی هستند که این ویژگی را کامل پشتیبانی می‌کنند.

Chrome، Edge و Opera از -webkit-optimize-contrast به عنوان نام‌مربوط crisp-edges استفاده می‌کنند.