مشکل بی کیفیت شدن عکس در سایز های مختلف

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

یکی از نمونه های که با مشکل مواجه شده

http://codepen.io/robinrendle/pen/EaOJeq

برای این کار باید از خصوصیت image-rendering استفاده کنید .

img {
  image-rendering: auto;
  image-rendering: crisp-edges;
 image-rendering: pixelated;
}

.و در بعضی مواقع با همچیین ترفندی میتونید از تغییر کیفیت عکس جلوگیری کنید

.image-scale-hack {
    transform: rotate( .0001deg );
}