خصائص image-rendering CSS

تعريف والاستخدام

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 استفاده می‌کنند.