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

Изменение размеров рисунка

Для изменения размеров рисунка средствами HTML у тега предусмотрены атрибуты width (ширина) и height (высота). В качестве значения используются пикселы, при этом аргументы должны совпадать с физическими размерами картинки. Например, на рис. 10.6 показано изображение, которое имеет размеры 100х111 пикселов.

Рис. 10.6. Картинка исходного размера

Соответственно, HTML-код для размещения данного рисунка, приведен в примере 10.4.

Пример 10.4. Размеры рисунка

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

Рис. 10.7. Размеры картинки не указаны и она еще не загрузилась

Рис. 10.8. Картинка загружена, текст переформатирован

Ширину и высоту изображения можно менять как в меньшую, так и большую сторону. Однако на скорость загрузки рисунка это никак не влияет, поскольку размер файла остается неизменным. Поэтому с осторожностью уменьшайте изображение, т.к. это может вызвать недоумение у читателей, отчего такой маленький рисунок так долго грузится. А вот увеличение размеров приводит к обратному эффекту — размер изображения велик, но файл относительно изображения аналогичного размера загружается быстрее.

На рис. 10.9 приведено то же изображение, что показано на рис. 10.6, но с увеличенной в два раза шириной и высотой.

Рис. 10.9. Вид картинки, увеличенной в браузере

Код для такого рисунка останется практически неизменным и показан в примере 10.5.

Пример 10.5. Изменение размера рисунка

Такое изменение размеров называется ресемплированием, при этом алгоритм браузера по своим возможностям уступает графическим редакторам. Поэтому увеличивать таким способом изображения нужно только в особых случаях, а то слишком ухудшается качество картинки. Лучше воспользоваться какой-нибудь графической программой. Исключением являются рисунки, содержащие прямоугольные области. На рис. 10.10 приведен файл узора, который занимает 54 байта и имеет исходный размер 8 на 8 пикселов, увеличенных до 150 пикселов.

Рис. 10.10. Увеличенное изображение

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

Как увеличить изображение в css

Чтобы увеличить изображение с помощью CSS, вы можете использовать свойство transform с функцией scale . Функция scale увеличивает или уменьшает размер элемента в соответствии с заданными значениями масштаба.

Например, если у вас есть изображение с классом image и вы хотите увеличить его в два раза, вы можете использовать следующий CSS-код:

.image  transform: scale(2); > 

Здесь мы используем свойство transform с функцией scale(2) , чтобы увеличить размер элемента в два раза. Таким образом, изображение будет увеличено в два раза относительно его исходного размера.

Как увеличить картинку при наведении?

За изменение масштаба изображения отвечает свойство transform с функцией scale() . В качестве её значения указывается число больше 1 для увеличения масштаба и меньше 1 — для уменьшения масштаба. К примеру, число 1.2 увеличивает масштаб на 20%.

Чтобы картинка увеличивалась при наведении на неё курсора мыши, свойство transform следует привязать к псевдоклассу :hover, как показано в примере 1.

Пример 1. Увеличение картинки

При наведении на картинку масштаб меняется мгновенно, поэтому для плавного увеличения изображения добавлено свойство transition , оно задаёт время масштабирования.

Если требуется масштабировать картинку, не увеличивая при этом её размеры, то каждое изображение надо поместить в . Для него задать свойство display со значением inline-block , чтобы стал размером с изображение; а также overflow со значением hidden , чтобы пряталось всё за пределами (пример 2).

Пример 2. Использование overflow

У изображений внутри строчно-блочных элементов снизу появляется небольшой отступ, его можно убрать с помощью свойства display со значением block .

См. также

• :focus на мобильных устройствах
• overflow
• transform
• Анимация ссылок при наведении
• Атрибут scroll
• Виды ссылок
• Всплывающая подсказка
• Высота и ширина в CSS
• Использование :hover
• Липкое позиционирование
• Несколько псевдоэлементов
• Нормальное позиционирование
• Ориентация
• Очистка float
• Переходы с помощью :hover
• Повёрнутые рамки
• Подробнее о позиционировании
• Подсветка строк и колонок таблицы
• Псевдокласс :hover
• Псевдоклассы в CSS
• Работа с типографикой
• Селекторы CSS
• Состояния кнопок
• Сочетание с псевдоклассами
• Типы ссылок
• Трансформация
• Трансформация
• Трансформация в CSS
• Функции трансформации

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

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

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

Кодировка без использования стиля (чистый 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 Щелчок по фото — изображение увеличивается. При уходе курсора — возврат. Переход от малого размера к ЛЮБОМУ размеру (без внутреннего стиля CSS). Возможность задать любой увеличенный размер. Простой и короткий код. В коде только один адрес фото. &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 активизируется в том случае, если на элемент наведен курсор мыши. Приведем еще один простейший способ переход от малого размера к ЛЮБОМУ размеру с использование стиля. Клик — увеличение размера, другой клик — возврат к исходному размеру.

&ltstyle&gt .a img < width:100px; >.b img < width:600px; >&lt/style&gt &ltbody&gt &ltdiv onclick=»this.className = (this.className == ‘a’ ? ‘b’ : ‘a’ )» Кодировка this.className = (this.className == ‘a’ ? ‘b’ : ‘a’) есть не что иное, как сокращенная запись условного оператора ( в таком виде он называется тернарным оператором). По сути тернарный оператор является сокращенной записью оператора if-else, записанного в форме: if (условие) переменная = первое выражение; else переменная = второе выражение Тернарный оператор содержит условие, за которым следует знак вопроса (?), затем выражение, которое выполняется, если условие истинно (первое выражение), далее следует двоеточие (:), и, наконец, выражение, которое нужно выполнить, если условие ложно (второе выражение). Знак ? соответствует русскому «то», знак : соответствует русскому «иначе». Кодировку (this.className == ‘a’ ? ‘b’ : ‘a’ ) можно произнести так: ЕСЛИ класс элемента, по которому щелкает курсор, имеет имя `a`, ТО выполняется действие после знака ? (класс `а` заменяется классом `b`), ИНАЧЕ выполняется действие после знака : то-есть, класс `b` заменяется классом `а`. Другими словами, при первом клике на картинку она изменяет свой размер, при втором клике происходит возвращение к исходному размеру.

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

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

По клику [функция On(a)]размер изображения увеличивается, по двойному клику [функция Off(a)] — возвращается к исходному размеру Ниже приводится скрипт. &ltscript&gt //Функция от параметра а function On(a) < a.style.width= '500px'; //На параметр а вешаем событие - увеличение размера >function Off(a) < a.style.width= '100px'; //вешаем на а другое событие - возврат к исходному >&lt/script&gt &ltbody&gt &ltdiv&gt&ltimg src=»http://data5r.narod.ru/18.jpg» width = «100» onclick=»On(this)» ondblclick=»Off(this)»&gt &lt/div&gt Пошаговое увеличение размера В вышеописанных способах эффект увеличения изображения достигается однократно. Ниже описаны способы, позволяющие за первым увеличением осуществить еще и второе.

Комбинация простых способов В этом способе первое увеличение происходит при наведении курсора, второе по щелчку. Возврат к исходному размеру — увод курсора с изображения. Если второе изображение очень большое и появляются ползунки, то воспользоваться последними для перемещения изображения невозможно. Как только курсор соскользнет с изображения, последнее возвращается к исходному размеру. Приводим скрипт. &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 < width:100px; >.g img < width:300px; >.h img < width:500px; >.j img < width:700px; >&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

Увеличение картинки с надписью Если по каким-то причинам нужно сэкономить место на странице, то с помощью нижеприведенного скрипта можно дать маленькое изображение, а потом увеличить его, кликнув по картинке. Чтобы увеличение размера картинки происходило по клику, используется псевдокласс focus. Приведем скрипт &ltstyle&gt .img1 < display:inline-block; position:relative; width: 150px; cursor:pointer; height: 100px; margin-left: 50px; margin-top: 180px; >.texta < position: absolute; font-size:10px; color:red; cursor:pointer; margin-left: 60px; margin-top: -100px; display: none; >.text1a < cursor:pointer; position:absolute; margin-top: 135px; margin-left: 56px; font-size:35px; font-weight: bold; color:cyan; >.img1:focus < width: 450px; height: 300px; >.img1:focus + .texta .img1:focus ~ .text1a &lt/style&gt &ltbody&gt &ltdiv &gtщелкни&lt/div&gt &ltdiv&gt&ltimg src=’18.jpg’ tabindex=»0″&gt&ltdiv tabindex=»0″&gtТекст поверх фото&lt/div&gt При щелчке по фото размер изображения увеличивается, при повторном клике вне поля картинки — размер возвращается к исходному.