Как увеличить изображение: варианты на 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="адрес_исходного_фото" />

Увеличить фото благодаря фокусу :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>

Использовать :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>

200 300 400 500

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

<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="уменьшенная_картинка"/>

Похожие статьи:

1. Картинка по размеру экрана на CSS
2. Изменить изображение при наведении