Как увеличить изображение: варианты на CSS и JavaScript
Использование CSS3: увеличение фотографии при клике.
Расширить изображение с помощью свойства transform.
Использовать :after.
Как увеличить изображение с помощью скрипта JavaScript.
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 Отрегулируйте значения сами
См. подробнее http://shpargalkablog.ru/2011/04/css-nalozhenie.html Анонимный отрегулировать картинку по центру я смог, но не смог никак сделать чтобы при открытии картинки, страница не не сползала вниз. я наверное как то не правильно объясняю то что хочу сделать. Анонимный хочу исправить ошибку. "страница не сползала вниз" NMitra При использовании :target не получиться. :( NMitra Исправила статью, замечания учтены. Дмитрий Спасибо, очень интересно. Хочу использовать transform. Подскажите, как сделать чтобы предыдущая картинка не подныривала под следующую. Спасибо. NMitra figure.vkl2:focus Дмитрий Спасибо огромное. виталий нестёркин Здравствуйте долго искал как это воплотить благодаря вам сделал Увеличить фотографию с помощью позиционирования но вот загвоздка картинка открывается вбок и поэтому у людей с неширокими мониторами будет не вся видна подскажите что написать в коде чтобы изменить а точнее сдвинуть к центру экрана
как сейчас это выглядит можно увидеть на сайте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.htmlhttp://shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.htmlhttp://shpargalkablog.ru/2011/04/css-nalozhenie.htmlhttp://shpargalkablog.ru/2011/03/svoistva-margin-padding.html виталий нестёркин Спасибо большое за помощь шас пока некогда ближе к ночи попробуюразобратса виталий нестёркин Наталья здравствуйте пытался написать вам письмо на адрес n.mitra@yandex.ru.письмо не отравилась ОшибкаНедопустимый адресАдрес n.mitra@yandex.ru. не существует или заблокирован. Письмо не было послано виталий нестёркин прошу прошения за мою невнимательность просто когда вставлял адрес не заметил точку после ru все нормально с ящикам Юрий Наташа, больше всего понравился вариант с transform: scale. Но при быстром перемещении курсора с одной соседней картинки на другую из границы "цепляются": article img
article img:hover
Видел в комментариях: figure.vkl2:focus
Но это не решает проблемы,т.к. в приоритете все равно будет какое-нибудь конкретное изображение. Может в таких случаях нужно задавать большее расстояние между img, чтобы они не "цепляли" друг друга? Или не указывать для изображений слишком большие размеры при наведении курсора? NMitra figure:hover, figure:focus Юрий К сожалению, не помогло. Это моя вина, т.к. целиком не объяснил ситуацию. Дело в том, что изображения находятся внутри ячеек таблицы. Чтобы было более наглядно приведу код (в html все скобки удалил):
section article h2 Название статьи /h2 figure :first-child
section > :last-child
figure img
figure img:hover
Для крайних статей и всех изображений прописано transform. Может они конфликтуют? Хотя о возможности такого информации нигде не нашел. NMitra Ничего не понимаю, нужна или ссылка на страницу или на пример на http://jsfiddle.net/ Юрий Половина кода все равно "улетела". Есть section, в которой три article. В каждом article размещено изображение. Далее:
section