Вторник, 27 Марта 2012 11:38

Одинаковые размеры картинок для списка новостей

Written by 
Оцени эту запись
(5 Голоса)

Цель: сделать одинаковые размеры картинок для списка новостей, при этом сами картинки могут быть произвольного размера.

Часто на сайте нужно выводить список статей в определенном виде. И для этого часто нужно вывести картинки из новостей, причем одинакового размера. А у новостей картинки могут быть разные по размеру и, что хуже, пропорциям. 

Допустим, есть у нас картинки:

  

Нужно вывести вертикальный список.

 Название статьи 1

Название статьи 2

Название статьи 2

 

 

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

 

Вторая картинка шире остальных, этот список смотрится некрасиво. Это можно исправить. Оборачиваем каждую картинку в <div> и задаем картинку background'ом. Фон центрируем по высоте и ширине, задаем блоку нужные высоту и ширину, а также  свойство overflow:hidden. 

 

 

 

 

Название статьи 1

 
 

Название статьи 2

 
 

Название статьи 3

 

Смотрится красивее, чем в первом варианте. Можно аналогично сделать вертикальный ряд.

 

 

Название статьи 1

 

Название статьи 2

 

Название статьи 3

 
 
Надеюсь, будет полезно.

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов