Проверьте, ретина или нет, используя только одно изображение

как говорится в названии. Можно ли использовать только одно изображение, которое уже подходит для сетчатки, но когда не используется экран сетчатки, изображение автоматически изменяет размер / обрезается до изображения без сетчатки? У меня проблема с IE (и я использую ПК). Все мои картинки отлично смотрятся в других браузерах, таких как Chrome, Opera, Moz и так далее. Но когда я смотрю на ту же картинку в IE, у нее есть эти «уродливые края».

Я видел этот сообщение в блоге, но он использует две картинки/изображения. Я не хочу этого, если это возможно, конечно.

var retina = window.devicePixelRatio > 1;

if (retina) {
    var html = '<img src="my-high-res-image.jpg">';
}
else {
    var html = '<img src="my-low-res-image.jpg">';
}

Чтобы быть более конкретным: если мое изображение, скажем, 500x500, и в моем CSS я уменьшаю его до 100x100 пикселей из-за экранов сетчатки. Но если экран не ретина, и я использую изображение 500x500, которое я уменьшаю, у него будут эти «хрустящие края».

Чтобы показать вам, что я имею в виду, я сделал два снимка экрана с одним и тем же изображением, которое я использую, используя Chrome и IE (Edge). Исходный размер изображений ниже 500x500, но уменьшен до 100x100.

введите здесь описание изображенияChrome

введите здесь описание изображенияIE

Итак, вернемся к моему вопросу, если я недостаточно ясно выразился: могу ли я использовать одно изображение, но указать, будет ли оно сетчаткой или нет, когда возникнет необходимость?


person maverick    schedule 21.10.2014    source источник
comment
Я думаю, вы можете быть сбиты с толку тем, что означает сетчатка. Насколько мне известно, это не то, что происходит для каждого браузера.   -  person Woodrow Barlow    schedule 21.10.2014
comment
Посмотрите адаптивный дизайн. Существуют библиотеки, которые загружают разные версии изображения в зависимости от размера экрана/плотности пикселей.   -  person Sergiu Paraschiv    schedule 21.10.2014
comment
Я понимаю это, конечно. Но моя проблема в том, что я сейчас не использую экран ретина. На Mac моих друзей все картинки выглядят нормально, даже в IE, когда он использует виртуальный бокс с IE. Но у меня на экране картинка выглядит хреново в ИЕ, а не в Хроме, Опере и тд. Почему это?   -  person maverick    schedule 21.10.2014
comment
Какую версию IE вы используете?   -  person Chris Spittles    schedule 21.10.2014
comment
На данный момент IE(Edge). Но сайт нормально работает на IE9+   -  person maverick    schedule 21.10.2014
comment
Не могли бы вы создать JSFiddle, воспроизводящий проблему?   -  person Chris Spittles    schedule 21.10.2014


Ответы (1)


Это то, как IE обрабатывает передискретизацию изображения в браузере. Вы должны быть в состоянии исправить это, используя это в своем CSS:

-ms-interpolation-mode: bicubic;

По умолчанию используется: -ms-interpolation-mode: nearest-neighbor;

Замена метода повторной выборки может решить вашу проблему в зависимости от того, какую версию IE вы используете.

Вот что говорит CSS Tricks:

http://css-tricks.com/ie-fix-bicubic-scaling-for-images/

person Chris Spittles    schedule 21.10.2014
comment
Да, я уже пользуюсь бикубиком... Почему-то, не знаю почему, все равно выглядит странно. - person maverick; 21.10.2014