VladimirNee Опубликовано 16 Апреля 2010 Жалоба Поделиться Опубликовано 16 Апреля 2010 (изменено) Здравствуйте.Хочу сделать вывод случайых изображений в квадратных боксах. Пример на картинке: http://s15.radikal.ru/i188/1004/70/b95537aa9173.jpg Код в шаблоне и CSS<div id='attach_wrap' class='rounded clearfix'> <ul> <foreach loop="gallery_images_hook:$rows as $r"> <li class="clip">{$r['_image']}</li> </foreach> </ul> </div> .clip { vertical-align: middle; text-align: center; position: relative; height: 100px; width: 100px; border: solid 1px #ccc; overflow: hidden; } .clip img { height: 160px; } Как видно из картинки последнее изображение вообще не разобрать, т.к. по умолчанию стоит выравнивание по горизонтали слева и по вертикали сверху. Прописывал "vertical-align: middle;" и "text-align: center;" но ничего не происходит. Выравнивать "margin" и "pading" смысла нет. Как решить проблему? Изменено 16 Апреля 2010 пользователем VladimirNee Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Ritsuka Опубликовано 16 Апреля 2010 Жалоба Поделиться Опубликовано 16 Апреля 2010 (изменено) .clip img { width: 100px; height: 100px; }не спасет отца демократии? Изменено 16 Апреля 2010 пользователем Ritsuka Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
VladimirNee Опубликовано 16 Апреля 2010 Автор Жалоба Поделиться Опубликовано 16 Апреля 2010 .clip img { width: 100px; height: 100px; }не спасет отца демократии? Можно задать либо ширину либо высоту что б изображение не искажалось. Если изображению 400х200 задать размер 100х100 то будет не очень смотреться. Поэтому изобрежние нужно подстроить внутри бокса по центру вертикально и горизонтально. На форуме ИПБскин Фисана ответила: Потому что форматирование идет из #attach_wrap li { margin: 5px 6px; float: left; } Уберете float: left;, они в столбик выстроятся. Можно попробовать float: left; заменить на display: inline; И добавить Код #attach_wrap ul { text-align: center; } Но лучше не пробовать, потому что тогда все изображения выстроятся в одну строку и не смогут переноситься, когда их много. попробую посмотреть в "attach_wrap ul" Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Ritsuka Опубликовано 16 Апреля 2010 Жалоба Поделиться Опубликовано 16 Апреля 2010 Можно задать либо ширину либо высоту что б изображение не искажалось. Если изображению 400х200 задать размер 100х100 то будет не очень смотреться.Не знаю, если есть острая необходимость разместить картинку в блоке 100x100 при этом не уменьшая её размеров и выровняв по центру, я бы положил её в бекграунд с "position: 50% 50%;", написав для этого небольшой сниппет на php, парсящий строки из {$r['_image']} и выбирающий из них реальную ссылку перехода и url картинки. Цитата Ссылка на комментарий Поделиться на других сайтах Прочее
Рекомендуемые сообщения
Присоединиться к обсуждению
Вы можете ответить сейчас, а зарегистрироваться позже. Если у вас уже есть аккаунт, войдите, чтобы ответить от своего имени.