Как сделать отзывчивые изображения с помощью CSS, HTML, WordPress и многого другого!

Не более десяти лет назад никто не говорил об отзывчивости веб-сайта. Единственной мантрой было: «Если это подходит для вашей системы, значит, это подходит и для всех остальных». Но сегодня «отзывчивость» является главной заботой каждого разработчика при создании веб-сайта. С развитием технологий и бумом мобильного производства каждый клиент задается вопросом: «Является ли мой сайт отзывчивым? Будет ли он точно отображаться на мобильных и планшетных компьютерах, где находится большинство моей аудитории?». Вот почему процесс тестирования отзывчивости становится все более строгим, чем когда-либо.Если вы занимаетесь веб-разработкой, я уверен, что вы наверняка получали такие вопросы довольно много раз.

Эй! Вы знаете? random-number-generator — это онлайн генератор случайных чисел, который создает положительные или отрицательные псевдослучайные числа по математической формуле в заданном вами диапазоне с повторениями или без них.

Содержание
  1. Что такое отзывчивость сайта?
  2. Мета-тег View-Port
  3. Можно ли полностью положиться на тег View-Port?
  4. Как проверить отзывчивость?
  5. Какие проблемы возникают при создании отзывчивых изображений на веб-сайтах?
  6. Как сделать отзывчивые изображения в HTML?
  7. Атрибут Srcset и переключение разрешения для отзывчивых изображений HTML
  8. Элемент изображения и художественное направление
  9. Разница между переключением разрешения и художественным направлением
  10. Как сделать отзывчивые изображения в CSS?
  11. Свойства Object-Fit и Object-Position для создания отзывчивых изображений в CSS
  12. Медиа-запросы для создания отзывчивых изображений в CSS
  13. Свойство Image-Set для создания отзывчивых изображений в CSS RWD
  14. Как сделать отзывчивые карты изображений?
  15. Создание отзывчивых карт изображений с помощью плагина JQuery
  16. Управление отзывчивостью в Internet Explorer?
  17. Создание отзывчивых карт изображений с помощью HTML и CSS
  18. Как сделать отзывчивые изображения в WordPress?
  19. Можно ли изменить атрибут Srcset для отзывчивых изображений в WordPress?
  20. Завершаем!

Что такое отзывчивость сайта?

Отзывчивость — это способность веб-сайта адаптироваться в зависимости от размера экрана, окна или разрешения. В 2019 году в интернет чаще заходят с мобильных устройств, чем с настольных компьютеров и ноутбуков. Как веб-разработчик, вы не можете игнорировать эту статистику. С 5 миллиардами мобильных устройств, активных во всем мире, отзывчивость стала основным требованием в индустрии веб-разработки. Итак, вопрос в том, насколько сложно разработать отзывчивый веб-сайт или преобразовать существующий?

Отзывчивость стала настолько популярной, что в CSS встроены правила запросов для преобразования веб-сайта в самонастраивающийся. Мы поговорим об этом в последующих разделах, но первое, что нужно запомнить на пути к созданию отзывчивых изображений: «Вам нужно рассчитать размер экрана, чтобы настроить изображения в соответствии с ним». Для этого мы используем правило метатега «view-port».

Из этого руководства по отзывчивому тестированию для начинающих вы узнаете, как выполнить отзывчивое тестирование вашего сайта на платформе LambdaTest.

Мета-тег View-Port

View-port — это область, которая видна пользователю. Таким образом, логически можно сделать вывод, что view-port напоминает размер экрана, на котором пользователь смотрит на сайт. Тег view-port выполняет ту же самую работу. Он вычисляет область просмотра экрана и возвращает значение, по которому мы можем настроить элементы сайта. Мета-тег viewport выглядит следующим образом:

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Можно ли полностью положиться на тег View-Port?

Определенно нет! Полагаться только на тег view-port недостаточно для текста и уж точно не может быть и речи для изображений. С помощью некоторых настроек браузер может передать веб-странице неверную информацию о view-port, что может привести к резкому поведению. Лучше следовать другим правилам, чтобы сделать отзывчивые изображения.

Как проверить отзывчивость?

Как веб-разработчик я уверен, что вы озадачены вопросом: «Как мне проверить, достаточно ли отзывчив мой сайт и хорошо ли он работает на всех устройствах?». Или у вас в голове крутится вопрос: а что если координаты моей карты изображений будут ломаться на других устройствах? Не волнуйтесь. У меня тоже возникали такие вопросы, когда я начинал процесс создания отзывчивого дизайна изображений или, возможно, просто создавал свой первый сайт.

Исходя из своего опыта, я рекомендую использовать облачное кросс-браузерное тестирование для проверки отзывчивости вашего изображения. Кросс-браузерное тестирование помогает проверить ваш сайт на сотнях и тысячах браузеров, что вы не смогли бы сделать вручную. В Интернете доступно множество инструментов. Вы можете выбрать платформу для кроссбраузерного тестирования LambdaTest, особенно для отзывчивого дизайна, поскольку в ней есть отдельный раздел для этого.

Приведенные выше скриншоты сделаны в LT Browser, браузере для отзывчивого тестирования. LT Browser — это мобильный тестер, который может обеспечить отзывчивость вашего сайта на нескольких устройствах одновременно. Вы можете выбрать из более чем 50 различных устройств, а также с помощью LT Browser вы можете проверить отзывчивость на нескольких устройствах одновременно с помощью функции бокового просмотра. Вы можете увидеть это на примере выше, когда я сравниваю портретный режим на iPad Air и ландшафтный режим на телефоне Galaxy. LT Browser можно использовать для тестирования разрешения экрана и отладки сайта одновременно на устройствах android и iOS, и вы даже можете создать свое собственное устройство.

В этом подробном видео уроке по LT Browser мы поможем вам начать работу с LT Browser.

Какие проблемы возникают при создании отзывчивых изображений на веб-сайтах?

Изображения — важный элемент веб-сайтов. Как говорится, они говорят тысячу слов, и веб-разработчики использовали это в своих интересах с самого начала эры веб-разработки. Сегодня очень трудно найти сайт без изображения (если он действительно существует).

Разработчики стараются использовать все больше и больше изображений, чтобы привлечь пользователя и не утомлять его длинным письменным контентом, который обязательно увеличит показатель отказов на сайте. Однако изображения представляют собой более серьезную проблему, чем письменный контент, когда речь идет об отзывчивости. Изображениями можно управлять с помощью тега viewport, о котором я говорил выше, но проблема в том, что система или CSS, если на то пошло, не знает, какой тип изображения она подгоняет.

Рассмотрим пример следующего изображения:

Приведенное выше изображение взято с сайта developers.google.com. Теперь посмотрите, как это изображение отображается на экранах разных размеров. На настольном компьютере оно выглядит так, как и должно было быть. На ноутбуке почти то же самое. На планшете оно обрезано, а на мобильном устройстве изображение сфокусировано только на главном объекте — человеке. Это не работа только тега viewport. Если бы это был просто тег viewport, мы бы получили полное изображение даже на маленьких экранах, оставив главный объект не в фокусе.

Это может заставить нас задуматься, можем ли мы использовать еще немного CSS и JavaScript для борьбы с этим?

Ответ — нет! С помощью CSS и JavaScript можно загрузить несколько копий изображения и позволить JS динамически определять размер экрана и загружать соответствующее изображение. Проблема в том, что из-за большого размера изображения разработчики CSS построили CSS таким образом, что он загружает изображение до загрузки всего документа, поскольку очевидно, что это займет больше времени. С нашими небольшими корректировками, в итоге мы будем загружать как оригинальное изображение, так и желаемое обрезанное изображение, что приведет к замедлению загрузки сайта и, возможно, разочарованию пользователей.

Для того чтобы более подробно рассказать о том, как сделать отзывчивые изображения, я расскажу о том, с помощью каких приспособлений и методов можно сделать отзывчивые изображения в HTML, CSS и WordPress.

Как сделать отзывчивые изображения в HTML?

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

  • Изображения с разным разрешением для разных экранов.

  • Изображения с разными размерами для разных экранов.

Атрибут Srcset и переключение разрешения для отзывчивых изображений HTML

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

Оригинальный тег img, который использует большинство людей, не знакомых с отзывчивым дизайном, выглядит следующим образом:

    <img src=”url of image” alt= “alt text” />
Войти в полноэкранный режим Выход из полноэкранного режима

В приведенном выше теге src означает источник изображения, где мы указываем его местоположение. Атрибут alt определяет альтернативный текст, который отображается, когда изображение не загружается. Это известно всем. Чтобы сделать этот тег совместимым с отзывчивым дизайном, был добавлен следующий новый атрибут:

    <img srcset="boat-480.jpg 480w, boat-800.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="boat-800w.jpg" alt="Boat Landscape">
Войти в полноэкранный режим Выйти из полноэкранного режима

Атрибут srcset отвечает за размещение правильного изображения из нескольких доступных в зависимости от размера экрана. Атрибут srcset содержит URL-адреса нескольких изображений, сохраненных на сервере. Когда вычисляется разрешение, выбирается изображение с наиболее близкой шириной. Само собой разумеется, для этого необходимо сохранить на сервере несколько копий одного и того же изображения с разными разрешениями.

Первый параметр — это имя изображения, в нашем примере это boat-480.jpg. За именем изображения следует пробел, а затем мы указываем реальное разрешение изображения.
Обратите внимание, что размер должен быть записан в формате «w», а не «px».

Другой используемый здесь атрибут — sizes. Атрибут Sizes содержит медиа-запрос (который будет подробно рассмотрен в следующем разделе) и разрешение, которое должно быть выбрано при истинном медиа-наборе.

Например, в приведенном выше примере (max-width: 600px) 480px означает, что всякий раз, когда область просмотра имеет max-width 600px, перейдите к srcset и выберите изображение, которое ближе всего по разрешению к 480px.

Атрибуты srcset и size не поддерживаются в браузере Opera Mini и Internet explorer. Поэтому, если вы загрузите веб-страницу в этих браузерах, они проигнорируют атрибуты srcset и size и будут просто ссылаться на атрибут src в обычном режиме и отображать изображения, указанные в атрибуте src.

Мы также можем предпочесть написание тега img несколько иным способом, чем мы использовали выше. Посмотрите на следующее преобразование написанного выше тега < img >:

    <img srcset="boat-320w.jpg, boat-480w.jpg 1.5x, boat-640w.jpg 2x" src="boat-640w.jpg" alt="Boat Landscape">
Вход в полноэкранный режим Выход из полноэкранного режима

Использование этого типа атрибутов называется переключением разрешения. Здесь мы указываем не разные размеры, а разные разрешения изображения. Так, для дисплея с большим разрешением будет выбран boat-640w.jpg 2x. Помните, что чем больше это число, тем лучше разрешение.

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

Элемент изображения и художественное направление

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

В этом изображении, несмотря на то, что основное внимание уделяется главному объекту, мы не хотим, чтобы полное изображение загружалось на каждом устройстве. Это излишне загрузит сеть, что приведет к медленной загрузке сайта на мобильных устройствах. Хорошее решение для этого — почему бы нам не хранить на сервере обрезанное изображение меньшего размера, чтобы устройства, которым оно нужно, не боролись за сеть? Нам нужно следовать этой стратегии, когда мы не хотим, чтобы наш объект был блеклым на маленьком экране, как на следующем изображении:

Что выглядит следующим образом на больших экранах (ноутбуки и настольные компьютеры):

Что идеально!!! Для отображения различных изображений с разными размерами на соответствующих экранах мы используем тег < picture >.

Приведенное выше изображение представляет собой простой тег с атрибутами src и alt. Его можно модифицировать в следующий код с элементом picture.

<picture>
     <source media = “(max-width: 799px)”  srcset = “kutch-480.jpg”>
     <source media= “(min-width: 800px)” srcset = “kutch-800.jpg”>
     <img src= “kutch.jpg” alt= “Rann Of Kutch Landscape” />
    </picture>
Вход в полноэкранный режим Выход из полноэкранного режима

Если вы уже работали в сфере веб-разработки, то заметите, что элемент picture напоминает тег video, который также является элементом-оберткой, содержащим несколько тегов < source >.

В приведенном выше примере тег source содержит атрибут media, который указывает, при какой максимальной ширине изображение на srcset должно быть выбрано браузером. Если область просмотра составляет 800px, то будет выбрано второе изображение. С помощью этого метода мы можем разместить на сервере несколько обрезанных изображений и позволить браузеру выбрать наиболее подходящее из них.
Важно, чтобы вы указали тег < img > также в элементе picture, иначе изображение не будет отображено на экране.

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

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

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

К сожалению, элементы изображения нельзя использовать в браузерах internet explorer и opera mini. Эти браузеры просто отображают изображение с тегом < img > и игнорируют другие элементы.

Вы знаете? random-paragraph-generator — бесплатный онлайн-инструмент для генерации случайных абзацев без особых усилий.

Разница между переключением разрешения и художественным направлением

Обе эти концепции выглядят похожими и запутанными, но их разницу легко понять.

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

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

Как сделать отзывчивые изображения в CSS?

Мы разобрались с тем, как сделать отзывчивые изображения в HTML и модифицировать файл

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

Свойства Object-Fit и Object-Position для создания отзывчивых изображений в CSS

Первое свойство, которое поможет нам в достижении этой цели, — это свойство object-fit. Это свойство определяет, как изображение должно изменять свои размеры при отображении на экранах разных размеров. Используя свойство object-fit, мы можем определить, хотим ли мы растянуть наше изображение в случае больших размеров экрана или уменьшить его для маленьких.

Свойство object используется вместе с тегом < img >:

    <img src = “abc.jpg” alt = “Text with ABC” style = “object-fit : cover” />
Вход в полноэкранный режим Выход из полноэкранного режима

Если установить свойство object-fit в значение «cover», то соотношение сторон останется прежним, но границы изображения будут обрезаны, чтобы оно заняло весь экран.

Свойство object-fit имеет пять значений:

Fit: Эти значения растягивают изображение, чтобы оно поместилось в поле содержимого, и не сохраняют соотношение сторон.

Contain: Значение contain увеличивает размер изображения или уменьшает его, сохраняя соотношение сторон.

Cover: Это значение полностью заполняет поле содержимого, но сохраняет соотношение сторон, обрезая изображение.

None (Нет): Это значение игнорирует любые настройки и отображает исходное изображение.

Scale-down: Это значение уменьшит изображение до размера, который находится между размерами со значениями «none» и «contain».

Простой пример показан ниже:

Object-fit доступен во всех основных браузерах, кроме Internet Explorer.

Еще одно важное свойство, используемое в CSS для достижения отзывчивости, — это object-position. Оно используется в дополнение к object-fit и часто вместе. Свойство object-position, как следует из названия, определяет положение изображения, насколько сильно вы хотите, чтобы это изображение было перемещено при отображении в браузере.

Свойство object-position принимает два значения x и y, которые определяют, что изображение должно быть размещено на расстоянии x px от левого края и y px от верхнего. Например:

    <img src = “ABC.jpg” alt = “The text ABC” style = “object-fit: cover; object-position: 0 5” />
Войти в полноэкранный режим Выход из полноэкранного режима

Здесь мы хотим, чтобы изображение было перемещено на 0px слева и 5px сверху.

Свойство Object-Position недоступно в браузерах Internet Explorer и Opera Mini.

Медиа-запросы для создания отзывчивых изображений в CSS

Следующими в нашем списке идут медиа-запросы, которые также очень популярны в CSS-культуре. Медиазапросы в CSS используют несколько иной подход, чем в разделе «Отзывчивые изображения HTML». Веб-разработчики должны помнить, что если мы создаем отзывчивые изображения с помощью медиазапросов CSS, мы не можем получить несколько изображений с сервера. Все, что мы делаем, мы должны делать на стороне клиента, т.е. в браузере. CSS не обрабатывает никаких запросов, связанных с сервером.

Медиазапрос CSS имеет следующий синтаксис:

 [@media](http://twitter.com/media) <parameter> (conditions) {

    // Code you want to be executed when this media query is true.

    }

Войти в полноэкранный режим Выйти из полноэкранного режима

В приведенном ниже примере мы изменим ширину изображения, рассчитав разрешение экрана.

<!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="utf-8">
        <title>Media Query</title>
        <style>
          @media screen and (max-width : 799px) {
            img.resp {
              width : 300px;
    }
          }

          @media screen and (min-width : 800px){
            img.resp
             { width : 800px;
            }
          }

        </style>
      </head>
      <body>
        <img src="Kutch.jpg" alt="Rann_Of_Kutch" class="resp">

        </style>
      </body>
    </html>
Ввести полноэкранный режим Выйти из полноэкранного режима

В приведенном выше коде мы даем команду CSS вычислить область просмотра экрана (через метатег) и затем в соответствии с тегом изменить ширину изображения. При размере области просмотра менее 799px изображение будет иметь ширину 300px, а при размере выше — 800px.

При запуске на платформе LambdaTest (Google Chrome / Win 10) изображение отображается так, как показано ниже.

Когда я запускаю его на мобильном экране на той же платформе, я ожидаю, что это изображение уменьшится до 300px.

И да, оно отображается так, как я задумал. Если бы я не использовал медиазапрос, я бы получил следующее изображение на устройстве с меньшим разрешением (используя следующий стандартный код):

    <img src="IMG_20191210_160206.jpg" alt="Rann_Of_Kutch" class="responsive" style = "width:800px">
Войти в полноэкранный режим Выход из полноэкранного режима

Используя подобные медиа-запросы, вы можете сделать отзывчивые изображения для своего сайта. Медиа-запросы поддерживаются всеми основными версиями браузеров (даже Internet Explorer).

Свойство Image-Set для создания отзывчивых изображений в CSS RWD

Еще один способ сделать отзывчивые изображения в CSS — использовать свойство image-set в CSS отзывчивого веб-дизайна. Свойство image set аналогично свойству srcset, о котором я упоминал выше в разделе об отзывчивых изображениях HTML.

Подобно srcset, image-set вычисляет разрешение и выводит изображение, наиболее подходящее для экрана. Таким образом, пользователь может разместить несколько изображений и указать CSS загрузить подходящее изображение.

Теперь вам, наверное, интересно, что я упомянул выше, что CSS не играет с сервером, а работает только на стороне клиента. Так вот, не запутайтесь в свойстве image-set. Оно может показаться альтернативой srcset, но на самом деле использование image-set — это нагрузка на пропускную способность. Когда вы нажимаете enter в адресной строке, все изображения будут получены, но загружены будут только подходящие. Это действительно не похоже на выигрыш.

Возможно, именно по этой причине image-set не может получить широкую поддержку со стороны браузеров.

Свойство image-set не поддерживается браузером internet explorer, ранними версиями Edge, всеми версиями Firefox и Opera Mini.

Ниже приведен фрагмент кода для использования свойства image-set. В этом коде мы изменяем фоновое изображение в зависимости от разрешения.

  .img {
      background-image: 
        image-set(
          url(image-799.jpg) 1x,
          url(image-800.jpg) 2x,
        );
    }
Вход в полноэкранный режим Выход из полноэкранного режима

Хорошо знать, как сделать отзывчивые изображения в CSS, но рекомендуется как можно чаще использовать свойства отзывчивых изображений HTML. Они эффективны и удобны для пользователей.

Как сделать отзывчивые карты изображений?

Отзывчивая карта изображений — это изображение, в котором различные области (или координаты) изображения ссылаются на различные гиперссылки (или текст всплывающей подсказки, или что-либо еще). Отзывчивые карты изображений обычно используются для создания различных гиперссылок на части изображения, но в практических сценариях они могут быть использованы буквально для всего, что вы захотите.

Лучший пример, который я нашел за последние дни, — это сайт индийского правительства, посвященный статистике Covid-19.

На приведенном выше рисунке есть единое изображение Индии и различные секции, обозначающие разные штаты страны. Наведя курсор на разные штаты, можно узнать название, статистику и общий % случаев заболевания COVID-19 в этом штате.

Отзывчивые карты изображений имеют огромное значение для веб-сайта, потому что они предоставляют гораздо больше информации, чем статичное изображение или много текста, и в большинстве случаев они являются основной и неотъемлемой частью веб-сайта, как в приведенном выше случае. Принимая во внимание их важность, очень важно, чтобы на вашем сайте были отзывчивые карты изображений и они отображались в соответствующих размерах.

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

  • с помощью плагина Jquery

  • Используя обычные методы CSS

Создание отзывчивых карт изображений с помощью плагина JQuery

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

Сделать отзывчивую карту изображений с помощью плагина JQuery очень просто.

  • Сначала убедитесь, что JQuery включен в HTML-файл (cdn или загруженный).

  • Для того чтобы сделать отзывчивую карту изображений, укажите координаты и высоту-ширину изображения.

  • Включите файл плагина JQuery в веб-страницу, которую вы скачали с GitHub.

  • $(document).ready(function(e) { $(‘img[usemap]’).rwdImageMaps(); });

  • Добавьте следующий блок сценария на свою веб-страницу:

И вы закончили с созданием отзывчивой карты изображений для вашего сайта.

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

Управление отзывчивостью в Internet Explorer?

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

Internet Explorer теряет поддержку многих функций HTML отзывчивого изображения и CSS, потому что браузер устарел. Если вы хотите, чтобы ваш отзывчивый сайт работал на этом браузере, вам придется пойти старым школьным путем.

Лучшим решением этой проблемы является использование ширины 100%, если вы хотите показать изображение на весь экран.

    <img src = “abc.jpeg” alt = “Responsive Demo” style = “width: 100%”>
Вход в полноэкранный режим Выход из полноэкранного режима

Вы также можете использовать значение атрибута width как «auto» следующим образом:

    <img src = “abc.jpeg” alt=”Responsive Demo” style = “width : auto”>
Войти в полноэкранный режим Выйти из полноэкранного режима

Это также растянет элемент на все горизонтальное пространство.

Итак, вы, возможно, задаетесь вопросом, в чем разница? Ну, width:100% и width: auto — это одно и то же, если нет родительского блока контейнера, отступов и полей, но если они есть, то width:100% — это 100% этого контейнера. Это означает, что он будет занимать только 100% пространства контейнера и не будет включать в эти 100% отступы, поля и т.д.

Ширина: auto, с другой стороны, не учитывает ничего из этого и все равно растягивает изображение по горизонтали, перекрывая поля, границы контейнера, паддинг и т.д.

Это будет хорошо видно из следующего изображения:

Это изображение для атрибута width: 100%:

<!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="utf-8">
        <title>Responsive Image Map</title>
        <style>
           #container {
            width : 80%;
            margin: 70px;
        }
       </style>
      </head>
      <body>
        <div id="container">
        <img src="IMG_20191210_160206.jpg" style = "width : 100%"/>
      </div>

        </style>
      </body>
    </html>

Войти в полноэкранный режим Выход из полноэкранного режима

Видно, что изображение соблюдает поля, которые были объявлены для блока div, под который обернуто это изображение.

Следующее изображение имеет значение width: auto (код такой же, как и выше, только атрибут width теперь имеет значение auto):

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

Создание отзывчивых карт изображений с помощью HTML и CSS

Проблема с отзывчивыми картами изображений заключается в том, что, хотя мы можем сделать изображение отзывчивым с помощью ранее разработанных методов, координаты не перемещаются относительно.

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

При выполнении корректировок нам, как веб-разработчикам, необходимо позаботиться об этом особо. Для этого вам придется действовать методом проб и ошибок и делать обоснованные предположения в соответствии с вашим собственным опытом в HTML и CSS. Я настоятельно рекомендую использовать неэффективные способы Chrome Developer’s Tools, чтобы сделать эту работу легко и быстро.

Иногда можно увидеть людей, ведущих блог о картах изображений, не имеющих никакого значения, кроме как для представления политических карт, которые используются очень малым процентом людей. Я считаю, что если вы достаточно хорошо знаете веб-разработку, вы можете разработать и представить инновационные способы использования карт изображений. Чтобы подтвердить это, ниже я приведу пример, отличный от карты. В приведенном ниже примере я использую одно и то же изображение, чтобы дать две отдельные ссылки: Одна на автомобиль, а другая на себя.

<!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="utf-8">
        <title>Responsive Image Map</title>
        <style>
        #wrapper {
          width: 100%;
            max-width: 812px;
          position: relative;
        }

        #wrapper img {
          max-width: 100%;
        }

        #harish {
          height: 44%;
          width: 17%;
          position: absolute;
          left: 39.75%;
          top: 50%;
        }

        #car {
          height: 44%;
          width: 17%;
          position: absolute;
          left: 15.75%;
          top: 40%;
        }

        </style>
      </head>
      <body>
        <div id="wrapper">
        <img src="IMG_20191210_160206.jpg" />
        <a id="harish" href="https://lambdatest.com" target="_blank" title="Harish"></a>
        <a id="car" href="https://lambdatest.com" target="_blank" title="Car"></a>
      </div>

        </style>
      </body>
    </html>

Войти в полноэкранный режим Выход из полноэкранного режима

Как сделать отзывчивые изображения в WordPress?

Многие люди сейчас создают свои сайты с помощью «WordPress». Его легко и быстро установить, хотя он имеет массу ограничений и не может сделать всю ту магию, которую могут сделать веб-разработчики. В любом случае, WordPress — это самая распространенная CMS, и она содержит множество изображений для вашего сайта. Поскольку пользователи WordPress не так часто имеют дело с кодированием, не стоит помечать разные изображения разными стилями, так как ваш администратор может не понять ничего из этого.

Для борьбы с этой ситуацией, начиная с версии 4.4, WordPress ввел встроенную отзывчивость изображений. Таким образом, каждый раз, когда автор сайта загружает изображение, WordPress делает еще 2 копии изображения и загружает их вместе с оригиналом (количество копий может меняться, если ваша тема добавляет дополнительные изображения). Эти копии имеют разные размеры и разрешения для разных экранов, так что загружаются только подходящие изображения в зависимости от разрешения. Щелкает ли это предложение что-нибудь? Если вы подумали об атрибуте srcset, то вы правы.

WordPress обеспечивает отзывчивость сайта с помощью того же атрибута srcset, о котором мы говорили в разделе HTML отзывчивые изображения. Как только вы загружаете изображение и размещаете его на сайте, оно размещается с тегами srcset различных разрешений. Но WordPress не изменяет соотношение сторон изображения. Независимо от того, сколько копий WordPress создаст с любым размером и разрешением, они всегда будут иметь одинаковое соотношение сторон.

Можно ли изменить атрибут Srcset для отзывчивых изображений в WordPress?

Вы, как разработчик, всегда можете изменить разрешение, зайдя в HTML-код и изменив разрешение целевого устройства или разрешение изображений. Поскольку WordPress написан на PHP, вам необходимо знать некоторые основы PHP.

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

  • wp_get_attachment_image_srcset() — функция, возвращающая атрибут srcset для прикрепленного изображения.

  • wp_calculate_image_src() — Вычисляет источники изображений, которые должны быть включены.

  • wp_get_attachment_image_sizes() — Функция, которая создает значение атрибута sizes изображения

  • wp_calculate_image_sizes() — Создает атрибут размеров изображения

  • fwp_image_add_srcset_and_sizes() — Добавляет атрибуты srcset и sizes к существующему элементу img. Используется функцией wp_make_content_images_responsive().

С помощью этих функций вы можете задать собственные атрибуты srcset и размеры изображения, а также выполнить другие необходимые процессы отзывчивости. Всегда приятно поиграть с кодом в качестве веб-разработчика.

WordPress также привлекает многих разработчиков для создания плагинов и тем для этой платформы. По этой причине WordPress может похвастаться хорошим количеством плагинов, которые помогают сделать отзывчивые изображения в WordPress за вас, не беспокоясь о коде вообще. Вы можете поискать их и загрузить те, которые вам нравятся.

Эй! Знаете ли вы? random-password-generator — Этот онлайн-генератор паролей создает надежные, сильные, разные пароли каждый раз. Вы можете выбрать длину пароля. Для обеспечения безопасности пароли генерируются без передачи через Интернет. Создайте пароль прямо сейчас!

Завершаем!

Тесты на отзывчивость получили большое распространение в сфере веб-разработки в связи с ростом числа мобильных и других устройств. Веб-сайт состоит из множества компонентов, но изображение является его неотъемлемой частью. Изображения передают много текста с содержанием и привлекают клиентов на сайт. В итоге, они должны быть отзывчивыми.

Теперь вы знаете различные способы создания отзывчивых изображений: вы можете написать обычный HTML-код с атрибутом srcset и элементом picture или использовать медиа-запросы CSS. Неважно, какую платформу для создания сайта вы используете, процессы HTML и CSS будут работать на всех из них. Эти платформы могут иметь или не иметь свои собственные способы решения проблемы отзывчивости. Но что бы вы ни выбрали, в следующий раз, когда будете создавать сайт, убедитесь, что изображения идеально подстраиваются под размер экрана.

Это все, что касается статьи о том, как сделать отзывчивые изображения, надеюсь, теперь у вас есть ответы на ваши вопросы. Если вы хотите узнать больше о том, как сделать отзывчивые изображения или задать любой другой вопрос по тестированию совместимости браузеров, свяжитесь с нами через раздел комментариев ниже. Счастливого тестирования!!! ?

Оцените статью
devanswers.ru
Добавить комментарий