Не правильно ретинизирует картинку, что делать?

всем привет, такой вопрос, когда экспортирую фоновое изображение в 1х то всё отлично, но если для 2х, то есть делаю ретинизацию, то эта же картинка как бы как лупа, увеличивается но не в размере а тип приближается, а то что лишнее обрезает, извините если не совсем понятно объяснил).

Первая ссылка это нормальная картинка, а вторая ссылка это как раз когда я сделал ретинизацию.
1)https://habrastorage.org/webt/65/27/08/6527087e542...

2)https://habrastorage.org/webt/65/27/08/652708e9118...

Здесь вроде не очень заметно, но когда я вставляю в код картинку, то она обрезаетс и остается лишь часть от картинки
Помогите подалуйста

Дополнительно:

В картинке проблемы нет, гони код) Желательно в виде песочницы


+ Заказать

 

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

 

    • Не правильно ретинизирует картинку, что делать?Есть ответ
    • 07.04.2024
    Ответить

    Если у вас проблемы с ретинизацией картинок на вашем сайте, то это может быть вызвано различными причинами. Вот несколько шагов, которые вы можете предпринять, чтобы исправить эту проблему:

    1. Проверьте разрешение изображения: Убедитесь, что разрешение изображения достаточно высокое для ретинизации. Рекомендуется использовать изображения с удвоенным разрешением, чтобы они выглядели четкими на экранах с высокой плотностью пикселей.

    2. Используйте CSS для масштабирования: Вы можете использовать CSS для масштабирования изображения на устройствах с высокой плотностью пикселей. Например, вы можете использовать свойство background-size: cover; для фонового изображения.

    3. Используйте тег : HTML5 включает элемент , который позволяет вам указать несколько источников изображений для различных устройств. Это позволяет браузеру выбрать наиболее подходящее изображение для отображения.

    Пример использования тега :

     
 
  <img src="image.png" alt="Image">

    4. Используйте JavaScript для динамической замены изображений: Вы также можете использовать JavaScript для динамической замены изображений на устройствах с высокой плотностью пикселей. Например, вы можете загрузить изображение с удвоенным разрешением при загрузке страницы на таких устройствах.

    Надеюсь, эти советы помогут вам исправить проблему с ретинизацией картинок на вашем сайте. Если у вас остались вопросы или вам нужна дополнительная помощь, пожалуйста, не стесняйтесь задать их.

Оставить комментарий