||
Увеличить изображение HTML/CSS
6 самых простых способов
Кодировка без использования стиля (чистый HTML)
Способ 1
Простейший код переход от малого размера к размеру оригинала (не больше)
через ссылку. Увеличенное изображение открывается в новом окне. Щелкни по фото. Возврат по стрелке ‘назад’. Скрипт будет выглядит так:
<body>
<a href="31.jpg"><IMG height=70 width=100 src="31.jpg" ></a>
</body>
Недостаток - могут возникнуть проблемы с возвращением на исходную страницу (см. комментарий к способу 3)
Способ 2
Щелчок по фото - изображение увеличивается. При уходе курсора - возврат. Переход от малого размера к ЛЮБОМУ размеру (без стиля). Возможность задать любой увеличенный размер. Простой и короткий код. В коде только один адрес фото.
<img class="aligncenter" src="31.jpg"
style="width:100px" onclick="this.style.width='800px'"
onmouseout="this.style.width='150px'" > //код не разрывать
Пояснения:
width: 100px - задает размер малого фото
width: 800px - задает размер большого фото
возврат к малому фото - уход курсора вне фото
Способ 3
Усовершенствованный аналог Способа 1
устраняет трудность, которая может возникнуть с возвращением к исходному окну. Благодаря target=”_blank” увеличенный рисунок открывается в новом окне. Закрытие последнего закрывает рисунок, но не закрывает сайт.
Иначе из-за неопытности пользователя может возникнуть следующая ситуация: открыв страницу с картинкой, он не знает, как вернутся назад и поэтому просто закрывает вкладку, а значит полностью покидает сайт.
<a target="_blank" href="31.jpg">
<img width="100" height="70" src="31.jpg"></a>
Способ 4
При наведении курсора - увеличение, при уводе курсора - возврат к исходному размеру. Увеличение до ЛЮБОГО размера. С помощью width задаются размеры: исходный рисунок, увеличенный рисунок и рисунок после ухода курсора.
<img src="31big.jpg" width=100 onmouseover="this.style.width=600"
onmouseout="this.style.width=100">
Увеличение за счет чистого стиля
Способ 5
Простейший переход от малого размера к ЛЮБОМУ размеру за счет стиля.
Увеличение изображения - щелчок по фото. Возврат - щелчок вне фото.
Кодировка
<style>
#img {width: 100px; cursor:pointer;}
#img:focus {width: 1200;}
</style>
</head>
<body>
<img src="31.jpg" id="img" tabindex="1">
Пояснения:
Здесь width задает размер исходного и увеличенного изображения. Обозначение “:focus” позволяет менять стиль элемента в зависимости от действий пользователя. Свойство focus активизируется при щелчке мыши. Для возврата к исходному размеру нужно щелкнуть вне изображения. Изображению присваивается идентификатор (“img”), которому в стиле задаются определенные свойства (после знака #img).
Способ 6
Еще один простейший переход от малого размера к ЛЮБОМУ размеру с использование стиля. При наведении курсора - увеличение, при уводе курсора - возврат к исходному размеру. Аналог способа 4.
<style>
#big {cursor: pointer; width: 100px;}
#big:hover {width: 1100px}
</style>
<img id="big" src="31.jpg">
Пояснения:
Здесь width задает размер исходного и увеличенного изображения. Обозначение “:hover” позволяет менять стиль элемента в зависимости от действий пользователя. Свойство hover активизируется в том случае, если на элемент наведен курсор мыши.