Изменение размера отображения картинок

Изменено 2010/02/17 00:36 Administrator — Категории страницы: CSS, HTML, Пример кода

CSS-стили

img.resizeimg
{
        max-width:100px;
        /*Или в процентах
        width:15%
        Или в пикселях
        width: 100px;*/
}
img.resizeimg:hover
{
        width:auto;
        height:auto;
}

Код HTML

<img class="resizeimg" alt="" src="img/birds.jpg" />

Теперь, собственно, само отображение, не дающее выйти изображению за пределы Вашего слоя, однако при наведении курсора на картинку, показывающее его (изображения) реальный размер.

CSSGLOBE предлагает (в этом случае) более навороченный вариант (требуются две картинки малоформатная и крупноформатная):

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

Код HTML

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

Вот так будет выглядеть: