Как сделать приближение картинки в css
Перейти к содержимому

Как сделать приближение картинки в css

  • автор:

Масштабирование картинок

Если для элемента не задать атрибуты width и height , то браузер самостоятельно определит ширину и высоту изображения после загрузки файла и покажет его в исходном размере. Рисунок в формате SVG браузеры, за исключением IE, выводят на всю доступную ширину.

Изменение масштаба и пропорций изображения делается как через атрибуты , так и через стили.

Использование атрибутов

Любую картинку можно как увеличивать, так и уменьшать в размерах, задавая значение высоты или ширины в пикселях или процентах от размера родителя. Если установлена только ширина или высота, то вторая величина вычисляется автоматически исходя из пропорций картинки. Два заданных значения могут исказить пропорции, особенно если они заданы неверно. В примере 1 показаны разные варианты задания размеров в пикселях.

Пример 1. Размеры в пикселях

Изображения Размеры не заданы Задана ширина Задана ширина и высота

В примере использовалась одна и та же фотография, для первого размеры явно не указаны, поэтому браузер добавил изображение в исходном виде. Для второй фотографии указана ширина 400 пикселей, что привело к уменьшению её размеров при сохранении пропорций. Третья фотография искажена, поскольку задана одинаковая ширина и высота, притом, что исходное изображение не квадратное (рис. 1).

Размеры фотографии

Рис. 1. Размеры фотографии

Аналогичным образом задаются размеры в процентах от ширины родительского элемента, таким образом можно установить картинку на всю ширину окна браузера. В примере 2 показано добавление трёх фотографий в ряд, ширина которых привязана к ширине окна.

Пример 2. Размеры в процентах

Изображения

Рыжая кошка
Рыжая кошка
Рыжая кошка

В данном примере все размеры заданы в процентах, так что приходится пользоваться математикой, чтобы суммарная ширина не получилась больше 100%. Ширину каждого элемента устанавливаем как 27%, к ней добавляется поле слева и справа по 2%, итого каждый элемент занимает 31%, а всего 31х3=93%. Оставшиеся 100-93=7% делим пополам, в итоге 7/2=3.5% — столько получается ширина промежутка между блоками. Для первого отступ слева нам не нужен, поэтому его убираем через свойство margin-left . Результат данного примера показан на рис. 2.

Масштабирование фотографий

Рис. 2. Масштабирование фотографий

Масштабирование через стили

Стили удобно задействовать, когда нужно массово задать одинаковые размеры для множества изображений, тогда не придётся указывать индивидуальные размеры для каждой картинки через width и height . Но если у вас большое количество иллюстраций разного размера, то стили здесь никак не помогут. Они пригодятся, например, для иконок одинаковой ширины и высоты или когда размеры задаются в процентах, как это показано выше. В примере 3 приведён стиль для изменения размеров всех изображений внутри элемента .

Пример 3. Размеры через стили

figure img < width: 100%; /* Ширина в процентах */ >

Когда для одного элемента одновременно указывается атрибут width и стилевое свойство width , то стили имеют приоритет выше.

Интерполяция

Предположим, что у нас есть растровая картинка размером 200х200 пикселей и мы увеличиваем её пропорционально по ширине в два раза. Площадь изображения и общее количество пикселей вырастет при этом в четыре раза. Новые пиксели добавляются браузером самостоятельно исходя из набора уже имеющихся. Способ получения этих новых пикселей называется интерполяцией изображения. Надо понимать, что качество очень сильно зависит от самого изображения, масштаба и алгоритма, но обычно результат получается хуже оригинала.

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

Алгоритм интерполяции заложен в браузер и может быть изменён с помощью свойства image-rendering . К сожалению, браузеры пока слабо поддерживают это свойство, поэтому приходится указывать несколько разных значений. В примере 4 показано изменение алгоритма, чтобы переходы цветов не размывались, а оставались чёткими. В браузерах Chrome и Opera пример пока не работает, ожидается что поддержка свойства появится в новых версиях.

Пример 4. Изменение алгоритма интерполяции

Флаг России

Изображения

Результат данного примера показан на рис. 3. Для левой картинки применяется алгоритм, заданный по умолчанию; для правой — метод интерполяции по ближайшим точкам.

Вид картинок после увеличения масштаба

Рис. 3. Вид картинок после увеличения масштаба

Вписывание картинки в область

Порой изображения необходимо вписать в область заданных размеров, например, для создания слайдшоу — плавной смены нескольких фотографий. Есть два основных способа. Первый метод простой и работает во всех браузерах. Задаём желаемые размеры области и скрываем всё, что в неё не помещается с помощью свойства overflow со значением hidden (пример 5).

Пример 5. Использование overflow

Рыжая кошка

Изображения

Результат примера показан на рис. 4. Область имеет высоту 400 пикселей и занимает всю доступную ей ширину. Для фотографии внутри устанавливаем ширину 100% и сдвигаем её чуть вверх, чтобы она лучше выглядела. Поскольку высота области фиксирована, то при уменьшении окна браузера до некоторого предела высота фотографии окажется меньше 400 пикселей и под ней появится пустое пространство. Поэтому вводим свойство min-width чтобы этого избежать.

Фотография внутри области заданных размеров

Рис. 4. Фотография внутри области заданных размеров

Второй способ не так универсален, поскольку свойство object-fit не поддерживается в IE, а Firefox его понимает только с версии 36. Зато object-fit позволяет более аккуратно вписать изображение в заданную область. В примере 6 показан стиль для этого. Задействовано значение cover , оно увеличивает или уменьшает изображение так, чтобы оно всегда полностью заполняла всю область.

Пример 6. Использование object-fit

figure < width: 100%; /* Ширина области */ height: 400px; /* Высота области */ margin: 0; /* Обнуляем отступы */ >figure img < width: 100%; /* Ширина изображений */ height: 100%; /* Высота изображении */ object-fit: cover; /* Вписываем фотографию в область */ >

См. также

  • object-fit
  • Атрибуты элементов
  • Выравнивание картинок
  • Добавление медиа-контента
  • Изображения
  • Изображения
  • Изображения в Bootstrap 5
  • Изображения в HTML
  • Подрисуночная подпись
  • Фон в CSS
  • Форматы графических файлов

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

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

Эффект приближения (зум) на CSS для картинок

ukraine help

Здравствуйте. Сегодня мы поговорим об эффекте приближения (зума) на CSS для изображений.

Припустим у нас есть картинка, вставляем HTML код:

Наши картинки имеют класс image к которому мы и будем задавать стили:

overflow : hidden ;
width : 380px ;
height : 250px ;

Создаем блок размером 380 на 250 пикселей. Наш блок будет идентичного размера как и изображение 380px на 250px . Стоит учесть, что для корректного увеличения картинки, ваше изображение должно быть точного размера с блоком (подгоняем эти размеры), иначе будет некрасиво.

Так же не забываем за overflow:hidden; . Это нужно для того, чтобы когда изображение зумируется, оно не выходило за наш блок.

Читайте також: Як підігнати блоки в сітці по висоті, зробити їх однаковими, рівними

Далее задаем стили для изображений:

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

Картинка является ссылкой

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

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

 img.big img.big:hover 

Ограничить высоту картинки с помощью свойства CSS max-width

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

Расширить изображение с помощью HTML5

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

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

  

200 300 400 500

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

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

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

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

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

 

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *