так обрезать или масштабировать?

У меня вот так получилось:

.avatar {width: 100px !important; height: 100px !important; overflow: hidden !important;}
.avatar img {min-width: 100px !important; min-height: 100px !important;}
(Вторая строка нужна для маcштабирования аватарок меньше 100px).

Но обрезается не равномерно со всех сторон, а справа и снизу, если на авке рамки, то смотрится некрасиво, ваша аватарка вообще в ппц превратилась, так как круг обрезался с двух сторон.

Aista, мастшабировать под фиксированную ширину/высоту в зависимости от формата изображения вертикаль/горизонталь и обрезать лишнее, если выразиться точнее.

Тайя, которая душит романтиков, я этот вариант тоже пробовала и все бы ок (с моими-то проще, я могу их всегда подогнать под размер в фотошопе, просто пока не заморачивалась), но тогда пропорции не сохраняются.
Получается, например, вот так по сравнению с оригиналом .



В гугле находила некий параметр clip но так и не поняла, как его можно применить в такой ситуации. Например, вот основная идея хорошо изложена, но я не настолько продвинута, чтобы вписать это в дайри-css: webo4ka.ru/load/46-1-0-3663

читать дальше"Часто появляется необходимость выводить изображения в блок фиксированного размера. В данном случае появляется проблема: как вписать картинку в блок без потери пропорции.
В большинстве блогов рекомендуют писать Javasсript код, который будет вычислять размеры картинки и масштабировать ее в нужный размер. Но это не наш метод. Привязка к js-коду не является хорошей идеей. К тому же до полной загрузки картинок скрипт будет бездействовать. Соответственно, страница некоторое время будет кривой.
Конечно, можно обрезать и масштабировать картинки до добавления их на сайт. но каждый раз запускать редактор и обрезать картинку по пикселям тоже не есть хорошо. Поэтому предлагаю воспользоваться привычным CSS, и обрезать картинку при помощи него. В данном случае, обрезка будет происходить по вертикали. То есть, по ширине картинка будет влезать полностью, а по высоте обрезаться.
Суть данного метода в том, что картинка будет вписана в блок определенных размеров. Все что не будет влезать в этот блок будет скрыто. Обрамляющий блок будет иметь те же самые свойства, что и картинка. Поэтому, его можно будет располагать и выравнивать так же, как и обычную картинку. Вариант, конечно, не идеальный, но действенный.
Код данного примера такой:

Код
<style type="text/css"> .imgPicture { display: inline-block; width: 200px; height: 120px; overflow: hidden; border: 5px solid #FFFFFF; background: #FFFFFF; outline: 1px solid #CCCCCC; margin: 10px; } .imgPicture img { width: 200px; border: none; margin: 0; padding: 0; } </style> <span class="imgPicture"> <img src="http://webo4ka.ru/Ucoz7/52061561.jpg" width="200" alt="Картинка 1" border="0"> </span> <span class="imgPicture"> <img src="http://webo4ka.ru/Ucoz7/84740535.jpg" width="200" alt="Картинка 2" border="0"> </span>
Как видите, картинки не исказились, а только обрезались. Хотя на самом деле остались полноразмерными. Этот метод будет очень удачным, если разность пропорций Ваших картинок невелика."

Или, возможно, что-то из этой идеи может сработать, но я тоже не представляю, как именно это прикрутить сюда: shpargalkablog.ru/2012/01/css-overflow-word-wra...

Lynn, это из-за того, что у вас автоматически дизайн установлен, а там прописано:
.avatar img {width:100px; height: 100px; padding: 5px 5px 5px 5px !important; z-index: 1; background:#ffffff;}

Если это убрать, и добавить код как я выше привела, тогда будет обрезаться, но это надо либо переустанавливать диз вручную, либо как-то перебивать свойства, а я не соображу пока как...

Lynn, max-width:100px; max-high:100px не пробовали?

Тайя, которая душит романтиков, с установкой ручного дизайна тут ровно одна проблема - в процессе съезжают блоки меню. Косяк в коде я найти так и не смогла - вроде бы берешь код из поста, ставишь куда положено, а получается в итоге неисправимая ерунда. Так что я смирилась, вроде бы часть параметров !important перебивается...
Но кстати, в оригинальном коде стоит ровно то же самое. Я потому и меняла на пропорциональное маштабирование, чтобы не искажались картинки.




Aista, неа, не спасает.(( Они все равно ужимают изображение (аналогично фотошопному "размер изображения") а мне бы найти "размер холста"

Lynn, а width:auto; max-high:100px?

Aista, тоже не вполне оно - отлично подойдет для ужимания высоких изображений, но никак не действует на широкие.
Жаль, что в css нельзя прописать if, было бы как раз то, что надо... один алгоритм для широких, другой для высоких и третий для исходно квадратных.

*подумав и помучавшись*
Мда, кажется, реально никак. Либо хвосты вырастают, либо рога вылазят - так или иначе невозможно одновременно урезать вертикальное по высоте и горизонтальное по ширине, сохраняя общий параметр 100х100 - при условии, что меняешь именно размер картинки с сохранением пропорций. Мне чудовищно не хватает понимания принципов встройки свойства clip или хотя бы overflow: hidden в эту конструкцию...

Lynn, тогда вариант как выше предлагали с небольшим фиксом
.avatar {width: 100px; height: 100px; overflow: hidden;}
.avatar img {width:auto;high:auto}

.avatar {width: 100px; height: 100px; overflow: hidden;}
.avatar img {width:auto;height:auto}

Aista, заработало! В допиленном, правда, виде, но таки заработало.
Спасибо!

Lynn, добавьте просто border-radius еще. -moz-borer-radius - он для старых версий мозиллы, я например, без просто border-radius круглых углов не вижу.

Тайя, которая душит романтиков, добавила. Так видно?
Вообще суммарно в коде получилось так:

.avatar img {min-width: 110px; min-height: 110px !important; width: 80% !important; height: 80% !important; Margin:0 !important; z-index: 1; padding:0px !important; border: 2px dotted #56400a; moz-border-radius: 55px; webkit-border-radius: 55px; border-radius: 55px} .avatar {max-width: 112px; max-height: 112px; overflow: hidden; moz-border-radius: 55px; webkit-border-radius: 55px; border-radius: 55px}