Как увеличить изображение: варианты на CSS и JavaScript

Использовать ссылку.

То есть наша картинка будет являться ссылкой на оригинальный размер изображения.
<a href="адрес_оригинального_изображения"><img src="адрес_уменьшенной_картинки"/></a>
Картинка является ссылкой
Этот вариант плох тем, что фактически пользователи уходят со страницы.

Ограничить высоту картинки с помощью :hover.

<style>
  img.big {cursor: pointer; max-width: 150px;}
  img.big:hover {max-width: none;}
</style>

<img class="big" src="адрес_исходного_фото" />
Ограничить высоту картинки с помощью свойства CSS max-width

Увеличить фото благодаря фокусу :focus.

<style type="text/css">
.popup {width: 150px; cursor:pointer;}
.popup:focus {width: auto;}
</style>

<img src="адрес_фото" class="popup" tabindex="1"/>
Увеличить фото благодаря фокусу

Увеличить фотографию с помощью позиционирования.

<style type="text/css">
.blok1 {position: relative; cursor:pointer; display: inline-block;}
.blok1 img + img {position:absolute; left: 0; top:0; z-index:100; display: none;}
.blok1:hover img + img {display: block;}
</style>

<div class="blok1">
<img src="адрес_миниатюры"/><img src="исходный_адрес"/></div>

Использование CSS3: увеличение фотографии при клике.

<style type="text/css">
.vkl3 > br,
.vkl3 > a:nth-of-type(2),
.vkl3 > br:target ~ a:nth-of-type(1) {display:none;}

.vkl3 > br {position:fixed;}

.vkl3 > br:target ~ a:nth-of-type(2) {display: block;}
</style>

<figure class="vkl3">
  <br id="vkl3"/>
  <a href="#vkl3">
    <img src="миниатюра"/>
  </a>
  <a href="#close">
    <img src="оригинал"/>
  </a>
</figure>


Или вариант модального окна.

Расширить изображение с помощью свойства transform.

Автор. Поясним свойство transform CSS.
<style type="text/css">
figure.vkl2 {
  width: 140px;
  background: white;
  box-shadow: 0 3px 10px #ccc;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  text-indent: 0px;
  text-align: center;
  padding: 5px;
  z-index: 100;
}

figure.vkl2 img {width: 100%; padding: 0px;}

figure.vkl2:hover {
  -webkit-transform: rotate(-1deg); -moz-transform: rotate(1deg); -o-transform: rotate(-1deg); -ms-transform: rotate(1deg);
  box-shadow: 0 2px 3px #666;
}

figure.vkl2:focus {
  -webkit-transform: rotate(-3deg) scale(2.5); -moz-transform: rotate(-3deg) scale(2.5); -o-transform: rotate(-3deg) scale(2.5); -ms-transform: rotate(-3deg) scale(2.5);
  box-shadow: 0 2px 3px #666;
}
</style>

<figure tabindex="1"><img src="адрес_картинки" /><figcaption>Текст</figcaption></figure>
Расширить изображение с помощью HTML5
Прыжки с шестом

Использовать :after.

В случай с :after фото не является элементом HTML. Не обязательно "изо" будут картинками разного размера, они могут быть разными фотографии.
<style type="text/css">
.kartinka {text-align: center;}

.kartinka input {display:none;}

.kartinka label {cursor:pointer;}

.kartinka label:after {display: inline-block; width: 100%;}

.kartinka input:nth-of-type(1):checked ~ label:nth-of-type(4):after {content: url(изо1);}

.kartinka input:nth-of-type(2):checked ~ label:nth-of-type(4):after {content: url(изо2);}

.kartinka input:nth-of-type(3):checked ~ label:nth-of-type(4):after {content: url(изо3);}

.kartinka input:nth-of-type(4):checked ~ label:nth-of-type(4):after {content: url(изо4);}
</style>

<figure class="kartinka">
<input type="radio" checked="checked" name="raz" id="kartinka1"/><label for="kartinka1">200</label> <input type="radio" name="raz" id="kartinka2"/><label for="kartinka2">300</label> <input type="radio" name="raz" id="kartinka3"/><label for="kartinka3">400</label> <input type="radio" name="raz" id="kartinka4"/><label for="kartinka4">500</label></figure>

Как увеличить изображение с помощью скрипта JavaScript.

Опять таки способов реализации довольно много. И здесь важен индентификатор, например, miniatuyra1.
<script>var imgbase = "маленькое_изо"; function cambiarla() { document.getElementById("miniatuyra1").src = "исходное_изо"; }</script>

<img id="miniatuyra1" src="маленькое_изо"/>
<a href="javascript: cambiarla();">Щелчок</a> &#8660; <a href="javascript:void(0);" onclick="document.getElementById('miniatuyra1').src=imgbase;">Отмена</a>

<a href="javascript:void(0);" onmouseover="getElementById('miniatuyra2').src='оригинальный_размер';" onmouseout="getElementById('miniatuyra2').src='уменьшенная_копия';"><img src="уменьшенная_копия" id="miniatuyra2" /></a>

Также посмотрим на тот скрипт, при котором изменения происходят по щелчку мышки.
<script>function miniatuyra3(cual,url) {var imagen1 = "уменьшенная_картинка";var imagen2 = "исходный_рисунок";var imagenactual = cual.src;if(imagenactual==imagen1) {cual. src = imagen2;} else  {cual. src = imagen1;}}</script>

<img onclick="miniatuyra3(this);" src="уменьшенная_картинка"/>
И тот, которым могут воспользоваться пользователи Picasa (подробнее).
Как увеличить изображение с помощью скрипта JavaScript
100 | 200 | 300 | 400 | 500 | 600



Похожие статьи:
  1. Картинка по размеру экрана на CSS
  2. Изменить изображение при наведении
в f t
наверх ↑

37 комментариев:

anya
При расширении большого количества изображений с помощью HTML5 они сами выстраиваются в каскад.Скажите как сделать так,чтобы они выстраивались в прямые линии??
спасибо!
NMitra
После картинки напишите

<div style="clear:both;"></div>
anya
Получилось,но вертикально,а как сделать их в ряд по горизонтали?
NMitra
Уберите действие из комментария 2 и пробелы между кодом картинок.

<figure tabindex="1">...</figure><figure tabindex="1">...</figure>...
anya
большое спасибо!
Tatiana Chernetsova
Спасибо большое! Я многому у вас учусь:)
NMitra
Я очень рада это слышать)))
Владимир
В "Использование CSS3: увеличение фотографии при клике", куда вставлять код?
Извините за наивный вопрос, но я новичок в блоггере.
NMitra
При написании статьи на вкладке "HTML" см. http://4.bp.blogspot.com/-D4dwjS4d6WU/T1tkoVRlBwI/AAAAAAAACxU/Uy9OvLq1Kzc/s1600/oshibka-nezakrytyi-teg.png
Анонимный
Примеры не проверены во всех браузерах(Ие в частности).Не понятно как разместить например 5 одинаковых вариантов на одной странице - они просто глючат, по одиночке работают (миниатюра1 - миниатюра2 - побарабану...) )))Конструктивная критика.
NMitra
Где есть id, нужно делать его индивидуальным. Не все свойства поддерживаются IE, но это не надолго. Для transition и transform нужны префиксы. Я рассматривала эти свойства в отдельных статьях.
Анонимный
здравствуйте. спасибо вам. много чего интересного я у вас узнал. у меня только есть вопрос. вот в CSS3 можно сделать так чтобы при увеличении страница не опускалась а оставалась в таком же положении в каком она и была. а то когда нажимаю я на нее страница и картинка спускаются вниз и как то не удобно. я новичок в этом. поэтому сам не могу разобраться. заранее спасибо!
NMitra
Отрегулируйте значения сами

.overlay{
left: -10%;
top: -50%;
}

См. подробнее http://shpargalkablog.ru/2011/04/css-nalozhenie.html
Анонимный
отрегулировать картинку по центру я смог, но не смог никак сделать чтобы при открытии картинки, страница не не сползала вниз. я наверное как то не правильно объясняю то что хочу сделать.
Анонимный
хочу исправить ошибку. "страница не сползала вниз"
NMitra
При использовании :target не получиться. :(
NMitra
Исправила статью, замечания учтены.
Дмитрий
Спасибо, очень интересно. Хочу использовать transform. Подскажите, как сделать чтобы предыдущая картинка не подныривала под следующую. Спасибо.
NMitra
figure.vkl2:focus {
z-index: 100;
position: relative;
}
Дмитрий
Спасибо огромное!!!
виталий нестёркин
Здравствуйте долго искал как это воплотить благодаря вам сделал
Увеличить фотографию с помощью позиционирования но вот загвоздка картинка открывается вбок и поэтому у людей с неширокими мониторами будет не вся видна подскажите что написать в коде чтобы изменить а точнее сдвинуть к центру экрана

.blok1 {position: relative; cursor:pointer; display: inline-block;}
.blok1 img + img {position:absolute; left: 0; top:0; z-index:100; display: none;}
.blok1:hover img + img {display: block;}




как сейчас это выглядит можно увидеть на сайте
http://xn--51-8kcfemaodkveyaqedoqejz1ao.xn--p1ai/
NMitra
Здравствуйте,

.blok1 img + img {left: 50%; margin-left: -372px;}
виталий нестёркин
спасибо что -то уже получается правда при значении -370 картинка сильно убежала влево поставил 370 сместилась почти на нужное место
шас подберу нужное значение а вот left: 50% непонятный параметр менял на 10 % визуально нечего не изменилось что он регулирует и если понадобится каким параметром немного опустить в низ картинку?
NMitra
margin-top:...

У вас две строки

.blok1 img + img {left: 50%; margin-left: 400px;}
.blok1 img + img {position:absolute; left: 0; top:0; z-index:100; display: none;}

Нижняя запись приоритетная, она перебивает значение left: 50%;
По хорошему нужно сделать так (я сразу этого не сделала, чтобы акцентировать ваше внимание на нужных свойствах)

.blok1 img + img {position:absolute; left: 50%; top:0; margin-left: 400px; z-index:100; display: none;}

Теория:
http://shpargalkablog.ru/2012/03/div-po-centru-html.html
http://shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html
http://shpargalkablog.ru/2011/04/css-nalozhenie.html
http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html
виталий нестёркин
Спасибо большое за помощь шас пока некогда ближе к ночи попробую
разобратса
виталий нестёркин
Наталья здравствуйте пытался написать вам письмо на адрес n.mitra@yandex.ru.письмо не отравилась
Ошибка
Недопустимый адрес
Адрес n.mitra@yandex.ru. не существует или заблокирован. Письмо не было послано
виталий нестёркин
прошу прошения за мою невнимательность просто когда вставлял адрес
не заметил точку после ru все нормально с ящикам
Юрий
Наташа, больше всего понравился вариант с transform: scale. Но при быстром перемещении курсора с одной соседней картинки на другую из границы "цепляются":
article img {
width: 100%;
height: 231px;
transition: 0.5s;
}

article img:hover {
transform: scale(1.5);
}

Видел в комментариях:
figure.vkl2:focus {
z-index: 100;
position: relative;
}

Но это не решает проблемы,т.к. в приоритете все равно будет какое-нибудь конкретное изображение. Может в таких случаях нужно задавать большее расстояние между img, чтобы они не "цепляли" друг друга? Или не указывать для изображений слишком большие размеры при наведении курсора?
NMitra
figure:hover, figure:focus {
z-index: 101;
}
Юрий
К сожалению, не помогло. Это моя вина, т.к. целиком не объяснил ситуацию. Дело в том, что изображения находятся внутри ячеек таблицы. Чтобы было более наглядно приведу код (в html все скобки удалил):

html
body

section
article
h2 Название статьи /h2
figure :first-child {
transform: translateX(-10px);
}

section > :last-child {
transform: translateX(10px);
}

figure img{
width: 100%;
height: 230px;
transition: 0.5s;
}

figure img:hover {
transform: scale(1.5);
position: relative;
z-index: 100;
}

/style

/body
/html

Для крайних статей и всех изображений прописано transform. Может они конфликтуют? Хотя о возможности такого информации нигде не нашел.
NMitra
Ничего не понимаю, нужна или ссылка на страницу или на пример на http://jsfiddle.net/
Юрий
Половина кода все равно "улетела". Есть section, в которой три article. В каждом article размещено изображение. Далее:

section {
display: table;
width: 100%;
border-spacing: 10px;
}

article {
display: table-cell;
width: 30%;
}
Юрий
Наташа, извините, вышибало Интернет. Разместил код на http://jsfiddle.net/ . Как его сохранить и взять ссылку? Стыдно признаться, но никогда не пользовался этим ресурсом...
NMitra
Нажмите кнопку Save
Юрий
Вот ссылка: http://jsfiddle.net/edpLqdrx/
Но там сложно увидеть проблему, т.к. отсутствуют сами изображения. При последовательном быстром наведении соседние картинки цепляются краями. Баг исчезает, если убрать transform: translateX прописанное для section > :first-child и section > :last-child. Но тогда, естественно, появляются крайние отступы.
NMitra
Подставила изображения, быстро водила туда-сюда, но так ничего и не увидала ((
Юрий
Странно... У меня баг виден очень хорошо. Попытаюсь разобраться сам... Извините, Наташа, что побеспокоил.