Сегодня мы познакомимся с одной очень интересной темой, которая возможно ищут большое количество людей и они задают, примерно один и тот же вопрос: Как мне правильно расположить фотографии, которые находятся в фотогалереи, так чтобы, высота и ширина их была одинакова и они хорошо смотрелись?. Хочу поделиться небольшим опытом и объяснить в этом уроке, как можно такого добиться используя CSS, получить оптимизированное изображение на сайте!
Сразу давайте определимся, что в этом уроке я расскажу Вам только про оптимизированное изображение для сайта. В следующем уроке, создам простую фотогалерею с 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>
Стили самые значимые в данном скрипте. Первый класс 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;
}
На этом в принципе все, до следующего урока уважаемые читатели!