как сделать чтобы при нажатии на картинку она увеличивалась html

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

За изменение масштаба изображения отвечает свойство 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
• Функции трансформации

Как увеличить картинку при нажатии в html или css?

Привет народ
Стало интересно как сделать так чтобы при нажатии на картинку она увеличивалась и фон стал черным или что то как у facebook или vk.com вот примерно как нужно prntscr.com/azilq1 дайте совет может есть готовое решение

• Вопрос задан более трёх лет назад
• 17342 просмотра

Комментировать

Решения вопроса 1

Хотя конечно calc() это не совсем верный подход. Но на флексы можете сами переделать. Главное общий принцип иллюстрирует.

Ответ написан более трёх лет назад

Нравится 2 4 комментария

Как сделать чтобы при нажатии на картинку она увеличивалась 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; > 

Курсы javascript

Мое знакомство с созданием сайтов почти на 100% ограничено HTML. сайты всегда делал для личного пользования, для знакомых. это я к тому, что в сложных материях могу просто не разобраться.

Что есть?
Сайт на 10-12 страниц, который нужно обновлять максимум раз в полгода. Пока что я готов работать с каждой страницей отдельно в Dreamweaver. Сайт сделан в табличной верстке. Пока умею только так.

Что нужно?
На одной из страниц небольшая галерея картинок. Сделана в виде вложенной таблицы, картинки в ячейках таблицы. Нужно, чтобы по клику картинки увеличивались.

Эта тема уже не раз поднималась в разных местах, но нигде я не нашел ответа, который бы удовлетворил меня как по результату, так и по доступности изложения. Потому и пишу здесь.

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

Надеюсь, что изложил все понятно.
В общем, интересует как самым простым способом все это реализовать.

P.S. Хотел скинуть ссылку на какой-нибудь сайт с примером того, как это должно работать, но как назло именно сейчас не могу найти. так что есть пока только описание.