13 ноября 2013
3607
оптимизация изображений на сайте, css

Оптимизация изображений на сайте

CSS
Демонстрация » Скачать »

Сегодня мы познакомимся с одной очень интересной темой, которая возможно ищут большое количество людей и они задают, примерно один и тот же вопрос: Как мне правильно расположить фотографии, которые находятся в фотогалереи, так чтобы, высота и ширина их была одинакова и они хорошо смотрелись?. Хочу поделиться небольшим опытом и объяснить в этом уроке, как можно такого добиться используя CSS, получить оптимизированное изображение на сайте!

 

 

ШАГ ПЕРВЫЙ. HTML.

 

Сразу давайте определимся, что в этом уроке я расскажу Вам только про оптимизированное изображение для сайта. В следующем уроке, создам простую фотогалерею с fancybox, которая будет выводить фотографии из базы, затем мы разберем полностью всю основу структуры фотогалереи - От создания раздела админки фотогалерея, до вывода ее на сайт.

 

И так первым делом, создадим простую таблицу и каждому новому столбцу пропишем класс photos_td, далее последуют два тега div, которые будут отвечать каждый за свое. У первого тега div класс photos_div_one, у второго, соответственно, photos_div_two. Внутри данного контейнера, последует тег a, который в следующем уроке будет отвечать за увеличение фотографий, а пока что ему отведено свойство в стилях CSS.

Внутри будет тег img с url путем на фотографии, которые будут храниться в папке img. У каждого тега img будет класс photos_id.

 

<table>
<tr>
<td class='photos_td'>
<div class='photos_div_one'>
<div class='photos_div_two'>
<a href=''>
<img src='img/1.jpg' alt='' class='photos_id'/> 
</a> 
</div>
</div>
</td>
<td class='photos_td'> 
<div class='photos_div_one'>
<div class='photos_div_two'>
<a href=''>  
<img src='img/2.jpg' alt='' class='photos_id'/>
</a>
</div>
</div>
</td>
<td class='photos_td'>
<div class='photos_div_one'>
<div class='photos_div_two'>
<a href=''>
<img src='img/3.jpg' alt='' class='photos_id'/>
</a>
</div>
</div>
</td>
</tr>
</table>

 

ШАГ ВТОРОЙ. CSS.

 

Стили самые значимые в данном скрипте. Первый класс photos_td отвечает за расстояние между фотографиями. Далее следуют сразу два класса для тегов div, .photos_div_one .photos_div_two a с применением ссылки тега a. Важнейшими свойствами стоит отметить display: block; и overflow: hidden;, которые не дают фотографии развернуться и обрезают ее таким образом, что она остается прекрасно видна и не сжата. Ну и последний класс photos_id, который устанавливает минимальную ширину с помощью свойства max-width.

 

.photos_td
{
padding: 30px;
}

.photos_div_one .photos_div_two a {
display: block;
width: 140px;
height: 90px;
overflow: hidden;
}

.photos_id {
max-width: 140px;
}

 

На этом в принципе все, до следующего урока уважаемые читатели!