Как увеличить фото в html

Как увеличить фото в html

Вчера и сегодня делал небольшой скрипт для своего сайта. Сделал. Теперь, если у тега “img” есть атрибут “scalable”, то на картинку можно будет кликнуть, чтобы её увеличить. В значение атрибута “scalable” нужно задать размер маленькой картинки (с единицами измерения css).
Наконец можно будет заняться разделом “Мои фотографии”!
Не стал искать готовых решений для такой задачи. Осваивать JS лучше на практике.
Под катом пример работы, код html, javascript с комментариями и css.

Посмотреть как это работает

html

 alt="Фото тюльпанов" src="/assets/posts/script-uvelichenie-kartinok/big/tulpan.jpg" scalable="150px">  alt="Фото цветов айвы" src="/assets/posts/script-uvelichenie-kartinok/big/ajva.jpg" scalable="150px"> 

JavaScript
Обернём в function, чтобы вставить код прямо в html моего сайта и не портить глобальную область видимости.

(function()  'use strict'; //Создаём полупрозрачный серый фон на заднем плане под увеличенным изображением. //Он будет перекрывать все элементы экрана. const imgBg = document.createElement('div'); document.getElementsByTagName('body')[0].appendChild(imgBg); imgBg.style = 'background-color: rgba(48, 48, 48, 0.6); position: fixed; top: 0px; left: 0px; width: 100%; z-index: 1'; imgBg.hidden = true; fillBg(); //Функция, которая растягивает серый фон по высоте на весь экран. //Перерисовываем высоту серого фона при изменении размеров окна браузера. window.addEventListener('resize', fillBg); function fillBg()  imgBg.style.height = (document.documentElement.clientHeight + 100) + 'px'; > //Определяем долю от размера экрана, которую будет занимать увеличенное изображение let bigImgageScreenFraction; if (window.matchMedia('(max-width: 1080px)').matches) //Зашли с мобильного.  bigImgageScreenFraction = 1.0; > else //Зашли с компьютера.  bigImgageScreenFraction = 0.7; > //Заглушка для картинки. Появляется вместо неё на том месте откуда она увеличилась. let placeholder = document.createElement('img'); document.querySelectorAll('img[scalable]').forEach((img) =>  const smallSize = img.getAttribute('scalable'); let defaultStyle = `max-width: $smallSize>; max-height: $smallSize>`; img.style = defaultStyle; let isGoingToSmall = false; img.addEventListener('click', () =>  if (img.getAttribute('is-big') === 'true') //Картинка большая - уменьшаем  //Смотрим по каким координатам надо вернуть картинку на место. let coords = placeholder.getBoundingClientRect(); //Устанавливаем для изображения уменьшенный размер. //Но position остаётся fixed, т.к. нужно, чтобы при анимации уменьшения не смещались остальные элементы страницы. img.style = `$defaultStyle>; position: fixed; left: $coords.left>px; top: $coords.top>px`; img.setAttribute('is-big', false); imgBg.hidden = true; //Указываем, что мы собираемся уменьшить картинку. //Эта переменная опять станет false, когда завершится анимация уменьшения. isGoingToSmall = true; > else //Картинка маленькая - увеличиваем.  imgBg.hidden = false; img.setAttribute('is-big', true); //Перед тем как увеличить картинку вставляем вместо неё заглушку. placeholder.hidden = false; placeholder.style = `width: $img.width>px; height: $img.height>px; background-color: rgb(200, 200, 200)`; img.before(placeholder); //Увеличиваем картинку. doImageBig(img); > >); img.addEventListener('transitionend', () =>  if (isGoingToSmall) //Отследили завершение анимации уменьшения.  //Вставляем картинку обратно в поток. img.style = defaultStyle; isGoingToSmall = false; //Убираем заглушку. placeholder.hidden = true; > >); //Сохраняем центровку увеличенной картинки при изменении размеров окна браузера. window.addEventListener('resize', () =>  if (img.getAttribute('is-big') === 'true') doImageBig(img); >); >); //Эта функция расчитывает размеры увеличенного изображения и центрирует его. function doImageBig(img)  let screenHeight = document.documentElement.clientHeight; let screenWidth = document.documentElement.clientWidth; let imgWidth = img.width; let imgHeight = img.height; let bigImgHeight = Math.round(screenHeight * bigImgageScreenFraction); let bigImgWidth = Math.round(screenWidth * bigImgageScreenFraction); let ratio = imgWidth / imgHeight let newWidth = Math.round(bigImgHeight * ratio); if (newWidth  bigImgWidth)  bigImgWidth = newWidth; > else  bigImgHeight = Math.round(bigImgWidth / ratio); > let left = Math.round(0.5 * (screenWidth - bigImgWidth)); let top = Math.round(0.5 * (screenHeight - bigImgHeight)); img.style = `max-width: $bigImgWidth>px; max-height: $bigImgHeight>px; left: $left>px; top: $top>px; position: fixed; z-index: 2`; > >)(); 

CSS

img[scalable]  cursor: pointer; transition-property: max-width, max-height, left, top; transition-duration: 0.3s; > 

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

Этот вариант плох тем, что фактически пользователи уходят со страницы.

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

 img.big img.big:hover 

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

 .popup .popup:focus 

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

 .blok1 .blok1 img + img .blok1:hover img + img 

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

 .vkl3 > br, .vkl3 > a:nth-of-type(2), .vkl3 > br:target ~ a:nth-of-type(1) .vkl3 > br .vkl3 > br:target ~ a:nth-of-type(2) 
 
     

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

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

 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 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 

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

В случай с :after фото не является элементом HTML. Не обязательно «изо» будут картинками разного размера, они могут быть разными фотографии.

  
200 300 400 500

200 300 400 500

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

Опять таки способов реализации довольно много. И здесь важен индентификатор, например, miniatuyra1.

var imgbase ; function cambiarla() Щелчок ⇔ Отмена

Щелчок ⇔ Отмена

Также посмотрим на тот скрипт, при котором изменения происходят по щелчку мышки.

И тот, которым могут воспользоваться пользователи Picasa (подробнее).

100 | 200 | 300 | 400 | 500 | 600

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

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

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

anya Получилось,но вертикально,а как сделать их в ряд по горизонтали? NMitra Уберите действие из комментария 2 и пробелы между кодом картинок.

.

.

. 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 Отрегулируйте значения сами

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

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

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

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

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

Теория:
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 все скобки удалил):

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;
>

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

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

Увеличить картинку при нажатии

Помогите решить проблему, я создал сайт с картинками, которые берутся от сайта Unsplash, сделал, что хотел, но я бы еще хотел, чтобы была возможность при нажатии любой картинки, будто с рандома или с поиска, она увеличивалась, я много вариантов переискал, как это сделать, но у меня не получалось, но я нашел один вариант, который мне очень понравился и я хотел бы, чтобы у меня примерно также было https://playcode.io/916548, надеюсь кто-то поможет.

const requestURL = 'https://api.unsplash.com/search/photos?page=1&per_page=20&client_id=Dn8-42Jk1UNg4-nIQbG_xlewlntyxqNTU2laqw9yWCs'; const randomImages = 'https://api.unsplash.com/photos/random/?client_id=Dn8-42Jk1UNg4-nIQbG_xlewlntyxqNTU2laqw9yWCs&count=100'; const searchImages = document.querySelector('form'); const input = document.querySelector('input'); const images = document.querySelector('.images'); function searchStart() < images.innerHTML = ''; input.value = ''; >fetch(randomImages) .then(response => response.json()) .then(data => < if (data) < data.forEach(item =>< images.innerHTML += showRandomImages(item) >); > >) function showRandomImages(data) < return ` 
 ' target='_blank' >$ ' target='_blank' >Photo by: $
 ` > function search(searchImg) < let url = `$&query=$`; return fetch(url) .then(response => response.json()) .then(result => < return result.results; >); > function showImages(data) < images.innerHTML = ''; data.forEach(item =>< let image = document.createElement('div'); image.className = 'showImage'; image.innerHTML = `  ' target='_blank' >$ ' target='_blank' >Photo by: $ ` images.appendChild(image); >); > searchImages.addEventListener('submit', (event) => < // if (input.value === '') < // alertify.error('Enter the title!') // >event.preventDefault(); let searchImg = input.value; searchStart(); search(searchImg) .then(showImages) >);

body < line-height: 1.6; font-weight: 400; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #111; width: 80%; max-width: 1600px; margin: 4em auto 0 auto; >h1 < text-align: center; margin-top: 0; font-weight: 300; font-size: 60px; line-height: 1.2; letter-spacing: -.1rem; >form < display: flex; width: 570px; height: 40px; justify-content: center; align-items: center; background-color: #212121; border-radius: 20px; padding: 10px; margin-left: 320px; margin-bottom: 50px; >.input-task input < width: 425px; height: 28px; border-radius: 20px; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; >.input-task < width: 500px; >input[type="text"] < width: 450px; height: 40px; padding: 10px 10px; background-color: aliceblue; border: 2px solid #d1d1d1; border-radius: 20px; box-shadow: none; box-sizing: border-box; margin-left: 5px; >.button, button[type="submit"] < display: inline-block; height: 40px; padding: 0 30px; font-size: 15px; text-decoration: none; background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%); margin: 15px; transition: 0.5s; background-size: 200% auto; color: black; border-radius: 10px; >.button, button[type="submit"]:hover < background-position: right center; color: #fff; text-decoration: none; cursor: pointer; border-radius: 10px; >img < object-fit: cover; width: 350px; height: 350px; padding: 4px 14px 42px 4px; margin-left: 34px; >.data < float: left; position: relative; >.data a < position: absolute; color: white; text-decoration: none; font-weight: 600; text-shadow: 0 0 5px black; >.showImage < float: left; position: relative; >.showImage a < position: absolute; color: white; text-decoration: none; font-weight: 600; text-shadow: 0 0 5px black; >.link < left: 45px; top: 8px; font-size: 15px; >.user < left: 45px; bottom: 50px; font-size: 15px; >.images

         -->   
Unsplash Images Gallery
  -->

.gallery picture < display: inline-block; margin: 5px; position: relative; overflow: hidden; width: 200px; height: 200px; >.gallery img