Как увеличить картинку css

Современные решения старых CSS-задач (3 часть): Масштабирование изображений на CSS

Это третья статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.

В не очень далёком прошлом, когда JQuery ещё был «Царём горы», наиболее популярным инструментом для реализации отзывчивости фоновых изображений был JQuery-плагин Backstretch

Я использовала этот плагина где-то на 30 сайтах, пока приведённое ниже свойство не получило достаточную поддержку браузерами (а если точнее, пока существенно не снизилась доля использования IE ниже 9 версии). И свойство это:

Согласно данным caniuse.com, данное свойство и значение поддерживается современными браузерами уже более 9 лет. Но вебсайты, использующие упомянутый плагин Backstretch или собственное подобное решение, могли до сих пор не обновиться.

Альтернативный метод использует стандартный тег img и магию свойства

Давайте рассмотрим, как использовать каждое из решений и узнаем, в каких ситуациях следует отдавать предпочтение каждому из них.

Использование background-size: cover

В течение 10 лет я создавала глубоко настраиваемые темы и плагины для корпоративных сайтов, разработанных на WordPress. Рассмотрим сценарий использования свойства background-size: cover на примере карточки одного из тех шаблонов.

Начнём с примера, когда фоновое изображение элемента задаётся через background-image в HTML-атрибуте style . Рекомендуется использовать aria-label , который заменит атрибут alt , присутствующий в тегах img .

Соответственно, CSS-стили могут быть следующими. Здесь используется трюк с padding-bottom , позволяющий задать соотношение сторон 16:9 для div-элемента, содержащего изображение:

Всё вместе это будет выглядеть следующим образом:

Использование object-fit: cover

Это новый способ, который, согласно данным caniuse, можно использовать без полифила, только если вам не нужна поддержка IE и Edge < 16

Это свойство применяется непосредственно к тегу img , поэтому мы обновляем HTML-нашей карточки на следующий, меняя тег div на img и атрибут aria-label на alt :

Затем CSS-код дополняется свойством height , которое будет ограничивать изображение любого размера так, чтобы оно имело заданное соотношение сторон. Если собственный размер изображения больше заданных ограничений, срабатывает свойство object-fit , которое по умолчанию центрирует изображение внутри границ, созданных контейнером карточки и свойством height :

В результате получаем следующее:

Когда использовать каждое из решений

Если нужна поддержка старых версий IE, то если не подключать полифил, вы ограничены лишь решением background-size (мне грустно говорить это в 2020 году, но это всё ещё может быть актуально для корпоративного сектора и сферы образования).

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

Как увеличить картинку css

&#9733 Чистый HTML
&#9733 Чистый CSS
&#9733 Чистый JavaScript
&#9733 Пошаговое увеличение размера
&#9733 Увеличение картинки с надписью

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

Кодировка без использования стиля (чистый HTML)

Способ 1 Простейший код переход от малого размера к размеру оригинала (не больше) через ссылку. Увеличенное изображение открывается в новом окне. Щелкни по фото. Возврат по стрелке ‘назад’. Скрипт будет выглядит так: &ltbody&gt &lta href=»31.jpg»&gt&ltIMG height=70 width=100 src=»http://data5r.narod.ru/31.jpg» &gt&lt/a&gt &lt/body&gt Недостаток — могут возникнуть проблемы с возвращением на исходную страницу (см. комментарий к способу 3).

Способ 2 Щелчок по фото — изображение увеличивается. При уходе курсора — возврат. Переход от малого размера к ЛЮБОМУ размеру (без стиля). Возможность задать любой увеличенный размер. Простой и короткий код. В коде только один адрес фото. &ltimg src=»http://data5r.narod.ru/31.jpg» style=»width:100px» onclick=»this.style.width=’800px'» onmouseout=»this.style.width=’150px'» &gt //код не разрывать Пояснения: width: 100px — задает размер малого фото width: 800px — задает размер большого фото возврат к малому фото — уход курсора вне фото

Способ 3 Усовершенствованный аналог Способа 1 — устраняет трудность, которая может возникнуть с возвращением к исходному окну. Благодаря target=»_blank» увеличенный рисунок открывается в новом окне. Закрытие последнего закрывает рисунок, но не закрывает сайт. Иначе из-за неопытности пользователя может возникнуть следующая ситуация: открыв страницу с картинкой, он не знает, как вернутся назад и поэтому просто закрывает вкладку, а значит полностью покидает сайт. &lta target=»_blank» href=»31.jpg»&gt &ltimg width=»100″ height=»70″ src=»http://data5r.narod.ru/31.jpg»&gt&lt/a&gt

Способ 4 При наведении курсора — увеличение, при уводе курсора — возврат к исходному размеру. Увеличение до ЛЮБОГО размера. С помощью width задаются размеры: исходный рисунок, увеличенный рисунок и рисунок после ухода курсора. &ltimg src=»http://data5r.narod.ru/31big.jpg» width=100 onmouseover=»this.style.width=600″ onmouseout=»this.style.width=100″&gt

Увеличение за счет чистого стиля

Способ 5 Простейший переход от малого размера к ЛЮБОМУ размеру за счет стиля. Увеличение изображения — щелчок по фото. Возврат — щелчок вне фото. Кодировка &ltstyle&gt #img #img:focus &lt/style&gt &lt/head&gt &ltbody&gt &ltimg src=»http://data5r.narod.ru/31.jpg» tabindex=»1″&gt Пояснения. Здесь width задает размер исходного и увеличенного изображения. Обозначение «:focus» позволяет менять стиль элемента в зависимости от действий пользователя. Свойство focus активизируется при щелчке мыши. Для возврата к исходному размеру нужно щелкнуть вне изображения. Изображению присваивается идентификатор («img»), которому в стиле задаются определенные свойства (после знака #img).

Способ 6 Еще один простейший переход от малого размера к ЛЮБОМУ размеру с использование стиля. При наведении курсора — увеличение, при уводе курсора — возврат к исходному размеру. Аналог способа 4. &ltstyle&gt #big #big:hover &lt/style&gt &ltimg src=»http://data5r.narod.ru/31.jpg»&gt Пояснения. Здесь width задает размер исходного и увеличенного изображения. Обозначение «:hover» позволяет менять стиль элемента в зависимости от действий пользователя. Свойство hover активизируется в том случае, если на элемент наведен курсор мыши. Приведем еще один простейший способ переход от малого размера к ЛЮБОМУ размеру с использование стиля. Клик — увеличение размера, другой клик — возврат к исходному размеру.

Увеличение за счет чистого JavaScript

Способ 7 Можно произвести увеличение размера, используя только JavaScript.

Комбинация простых способов В этом способе первое увеличение происходит при наведении курсора, второе по щелчку. Возврат к исходному размеру — увод курсора с изображения. Если второе изображение очень большое и появляются ползунки, то воспользоваться последними для перемещения изображения невозможно. Как только курсор соскользнет с изображения, последнее возвращается к исходному размеру. Приводим скрипт. &ltp align=center&gt&ltimg src=’Karta-5.jpg’ width=130 onMouseover=’this.style.width=900′ onclick=’this.style.width=1500′ onMouseout=’this.style.width=130’&gt

С помощью тернарного оператора Этот способ позволяет 3 раза увеличивать размер изображения, последовательно кликая на фото 3 раза. На четвертом клике происходит возврат к исходному размеру. О сути тернарного оператора и его работе было сказано выше в разделе «Увеличение за счет чистого стиля». &ltstyle&gt .f img .g img .h img .j img &lt/style&gt &ltbody&gt &ltdiv onclick=»this.className =(this.className == ‘f’ ? ‘g’: this.className == ‘g’ ? ‘h’ : this.className == ‘h’ ? ‘j’: ‘f’)»&gt&ltimg src=’18.jpg’ &gt&lt/div&gt&lt/div&gt