Текущий посетитель:
Гость
Вход
Навигация
¶
Главная
|
Новая
|
Поиск
|
Страниц: 20
|
Категории
|
Что это?
|
Файлы
|
Язык wiki
|
Language Selection
Назад
Изменение размера отображения картинок
Изменено 2010/02/17 00:36
Administrator
Категоризировано
CSS
,
HTML
,
Пример кода
<ru-ru> CSS-стили <pre class="brush: css"> img.resizeimg { max-width:100px; /*Или в процентах width:15% Или в пикселях width: 100px;*/ } img.resizeimg:hover { width:auto; height:auto; } </pre> Код HTML <pre class="brush: plain"> <esc><img class="resizeimg" alt="" src="img/birds.jpg" /></esc> </pre> Теперь, собственно, само отображение, не дающее выйти изображению за пределы Вашего слоя, однако при наведении курсора на картинку, показывающее его (изображения) реальный размер. <style type="text/css"> img.resizeimg { width:100px; /*Или в процентах width:15%*/ } img.resizeimg:hover { width:auto; height:auto; } </style> <img class="resizeimg" alt="" src="img/birds.jpg" /> CSSGLOBE предлагает (в этом случае) более навороченный вариант (требуются две картинки малоформатная и крупноформатная): CSS-стили <pre class="brush: css"> ul#gallery, ul#gallery li{ margin:0; padding:0; list-style:none; } ul#gallery{ margin:2em 0; } ul#gallery li{ float:left; display:inline; margin-right:5px; } ul#gallery a{ float:left; display:inline; position:relative; } ul#gallery a:hover{ background:none; z-index:100; } ul#gallery a span{ display:none; } ul#gallery a:hover span{ float:left; display:block; cursor:pointer; } ul#gallery a:hover em{ display:none; } ul#gallery a img{ border:1px solid #999; padding:2px; background:#fff; } ul#gallery a:hover img{ border:1px solid #000; } </pre> Код HTML <pre class="brush: plain"> <esc><ul id="gallery"> <li> <a href="#"> <em><img src="img/birds_small.jpg" alt="gallery thumbnail" /></em> <span><img src="img/birds.jpg" alt="gallery image" /></span> </a> </li> </ul></esc> </pre> Вот так будет выглядеть: <style type="text/css"> ul#gallery, ul#gallery li{ margin:0; padding:0; list-style:none; } ul#gallery{ margin:2em 0; } ul#gallery li{ float:left; display:inline; margin-right:5px; } ul#gallery a{ float:left; display:inline; position:relative; } ul#gallery a:hover{ background:none; z-index:100; } ul#gallery a span{ display:none; } ul#gallery a:hover span{ float:left; display:block; cursor:pointer; } ul#gallery a:hover em{ display:none; } ul#gallery a img{ border:1px solid #999; padding:2px; background:#fff; } ul#gallery a:hover img{ border:1px solid #000; } </style> <ul id="gallery"> <li> <a href="#"> <em><img src="img/birds_small.jpg" alt="gallery thumbnail" /></em> <span><img src="img/birds.jpg" alt="gallery image" /></span> </a> </li> </ul> <div style="clear:both;"> </div> </ru-ru> <en-us> [Login.aspx|Log in] or [Register.aspx|create an account] to start this article </en-us>
Meta Keywords:
графика, картинки, размер
Meta Description:
Пример отображения картинок в одном размере и изменение размера при наведении курсора
Change Comment:
Alright
Ok
Getting Better
Pretty Good
Awesome
Использование материалов
WEB энциклопедии
разрешено на условиях
лицензии GNU для документации