হাইডিপিআই স্ক্রিনগুলিতে আপস্কলিং চিত্রগুলির বিরক্তিকর আচরণ, যা ঝাপসা ছবিগুলি (ওরফে ফটোগ্রাফারদের দুঃস্বপ্ন) এর দিকে পরিচালিত করে, বেশ কিছু সময়ের জন্যও আমাকে বিরক্ত করেছিল। আমি আরও ভাবলাম যে চিত্রগুলির জন্য এটি অক্ষম করার জন্য কোনও সাধারণ সিএসএস অ্যাট্রিবিউট নেই।
সিএসএস সহ আমার বর্তমান সমাধানটি এর মতো দেখাচ্ছে:
@media only screen and (min--moz-device-pixel-ratio: 1.25),
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-device-pixel-ratio: 1.25) {
img {
--pic-width: 460px;
width: calc(var(--pic-width) / 1.25 - var(--pic-width) + var(--pic-width));
}
}
@media only screen and (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5) {
img {
--pic-width: 460px;
width: calc(var(--pic-width) / 1.5 - var(--pic-width) + var(--pic-width));
}
}
@media only screen and (min--moz-device-pixel-ratio: 1.75),
(-o-min-device-pixel-ratio: 7/4),
(-webkit-min-device-pixel-ratio: 1.75),
(min-device-pixel-ratio: 1.75) {
img {
--pic-width: 460px;
width: calc(var(--pic-width) / 1.75 - var(--pic-width) + var(--pic-width));
}
}
@media only screen and (min--moz-device-pixel-ratio: 2.00),
(-o-min-device-pixel-ratio: 2),
(-webkit-min-device-pixel-ratio: 2.00),
(min-device-pixel-ratio: 2.00) {
img {
--pic-width: 460px;
width: calc(var(--pic-width) / 2.00 - var(--pic-width) + var(--pic-width));
}
}
পরবর্তী পদক্ষেপটি ক্লাস ব্যবহার করে প্রয়োজনে বিভিন্ন চিত্রের মাপ নির্ধারণ করতে এবং সেট করতে হবে। আমি চিত্রের আকারগুলি গতিশীল করার কোনও উপায় জানি না। সিএসএস ফাংশন অ্যাটর্স () এটির জন্য কাজ করে না বলে মনে হচ্ছে।