Сделать картинки квадратными

[Tchorteg]

Вечер добрый.

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

И хочу с помощью css делать образать те что большие, и маленькие увеличивать и делать квадратными.

Пробовал с помощью clip:

Но не получилось, т.к все картинки разные, не знал что поставить или быть может какое то условие для стилей. Пока не придумал.

Прошу у вас совета.

Edited April 16, 2011 by Tchorteg

[psywalker]

Погружай их в контейнер с overflow: hidden; и ему задавай ширину и высоту.

[Gaspode]

div.avatar {
      width: 200px;
      height: 200px;
   }
   div.avatar img {
      max-width: 100%;	  
      max-height: 100%;
   }
....
<div class="avatar">
   <img src="траляля" alt="траляля 2" />
</div>

Как-то так, наверное.

ЗЫ

А если совсем красиво выглядеть хочецо, то вот так:

div.avatar {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   width: 200px;
   height: 200px;
}
div.avatar img {
   max-width: 100%;	  
   max-height: 100%;
}

Но тут старые IE загнуцо. Правда, они и на предыдущем варианте загнуцо.

Edited April 16, 2011 by Gaspode

[Tchorteg]

Погружай их в контейнер с overflow: hidden; и ему задавай ширину и высоту.

Получилось без overflow. Но некоторые картинки уезжают в бок, не пойму почему. Посмотрите пожалуйста:

http://yametal.net/main.php Тут видно, картинка слева сверху уехала влево.

Edited April 16, 2011 by Tchorteg

[Gaspode]

картинка слева сверху уехала влево.

Дык вы её центрируйте, она и... центрируется. text-align: center для пунктов списка.

Edited April 16, 2011 by Gaspode

[psywalker]

Получилось без overflow. Но некоторые картинки уезжают в бок, не пойму почему. Посмотрите пожалуйста:

http://yametal.net/main.php Тут видно, картинка слева сверху уехала влево.

А по-моему у тебя картинки некоторые ширины где то 60пк изначально.

[Tchorteg]

Центрировалось. Но топерь увидел такой баг.

Т.к картинка обрезалась, а была большая. То ссылка с этой картинки лежит поверх картинок ниже. Можно как-то сделать чтобы при образении, невидимое поле было не активно для ссылки?

А по-моему у тебя картинки некоторые ширины где то 60пк изначально.

Нет, это средствами движка ресайзю в цикле.

Edited April 16, 2011 by Tchorteg

[psywalker]

Центрировалось. Но топерь увидел такой баг.

Т.к картинка обрезалась, а была большая. То ссылка с этой картинки лежит поверх картинок ниже. Можно как-то сделать чтобы при образении, невидимое поле было не активно для ссылки?

Накладывать сверху ещё один див, пустой.

[sasha_design]

на многих сайтах есть ограничения по авам - например 100 х 100. Вот и ты выложи подобные. Самый лёгкий вариант.

Edited April 18, 2011 by sasha_design

[Veseloff]

На ум приходят два варианта

1. Обрезать их на стороне сервера

2. Создать блоки нужного размера и поставить им эти картинки бэкграундом

Первое, понятно, предпочтительнее