CSS ایمج-ریندرنگ پروپرتی

مفهوم و کاربرد

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

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

مثال

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

.image {
  ارتفاع: 100 پیکسل;
  عرض: 100 پیکسل;
  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;

مقدار ویژگی

جزئیات فنی

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

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

چروم، ایج و اپرا از -webkit-optimize-contrast به عنوان نام مستعار crisp-edges استفاده می‌کنند.