Навигация¶

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

Изменено 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: