код, как:Как использовать CSS, чтобы это работало на экране сетчатки?
<a href="http://localhost/link-a"><img src="a.png"></a>
Файл изображения a.png является 100x100, а на экране сетчатки глаза, это очень некрасиво, поэтому я могу создать файл 2x PNG. Но как я могу заставить его работать в этом HTML-коде?
Я предлагаю пойти за SVG, если вы используете значки. Однако, если вы хотите использовать изображение, вы можете использовать атрибут srcset.
<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x, image-3x.png 3x, image-4x.png 4x">
см can i use ..
просто интересно, что такое 3x, 4x для? –
(@ 3x) для iPhone 6 Plus :) –
Лучшим вариантом было бы использовать изображение svg, которое будет соответствовать всем разрешениям.
Но для текущего кода, вы можете использовать медиа-запрос
HTML:
<a href="http://localhost/link-a"><img src="a.png" class="normalDisplay"><img src="abiggerresolution.png" class="retinaDisplay"></a>
В вашем CSS:
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
img.normalDisplay {
display: none;
}
img. retinaDisplay {
display: block;
}
}
Чистый раствор JS:
var retina = window.devicePixelRatio > 1;
if(retina) {
document.querySelector("img.specifyclassname").src="mention your higher resolution image link";
}
Другой вариант: Использовать retina.jslink.
Сценарий проверяет ваш сервер, чтобы увидеть, есть ли у вас источник изображения с @ 2x в конце. Он заменит это изображение с изображением с более высоким разрешением.
вы хотите изменить размер изображения? –
использовать медиа-запрос, чтобы показать соответствующее изображение на основе отношения пикселя устройства – mohamedrias
. Сначала я предложил бы вместо использования изображения использовать формат 'svg', но если вы не можете использовать формат 'svg', вы можете использовать атрибут' srcset' , –