Страница 1 из 11
Форум » Архив » Архив » Выравнение изображени в блоке.
Выравнение изображени в блоке.
CbIPoK Offline
Проверенный
37
Дата: Среда, 12.08.2015, 21:06 | Сообщение # 1
У меня есть блок 165 на 165 пикселей, получается внутри него находится изображение, которое растягивается по ширине и выравняется в центре по вертикали.

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

HTML код
Код
<div class="inform_block">
<div class="inform_screen">
<img src="$IMG_URL1$" alt="$TITLE$">
</div>
</div>


CSS стиль
Код
.inform_block {padding: 2px; background: #f6f6f6; width: 165px; height: 165px; box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.5); float: left; margin: 5px;}
.inform_screen {vertical-align: middle; background: #000; display: table-cell; width: 165px; height: 165px; position: relative; overflow: hidden;}
.inform_screen img {width: 165px;}


Помог? Ставь + в репутацию! :3
Профиль
ia-7 Offline
Проверенный
4
Дата: Среда, 12.08.2015, 21:12 | Сообщение # 2
Код
<div align="center">
<img src="$IMG_URL1$" alt="$TITLE$">
</div>




Сообщение отредактировал ia-7 - Среда, 12.08.2015, 21:12
Профиль
kefir Offline
Проверенный
6
Дата: Среда, 12.08.2015, 21:13 | Сообщение # 3
Пробывал horizantal-align ?))


Профиль
CbIPoK Offline
Проверенный
37
Дата: Среда, 12.08.2015, 21:15 | Сообщение # 4
align-center - побовал, не выравнивает.

horizantal-align - аналогично.


Помог? Ставь + в репутацию! :3
Профиль
kefir Offline
Проверенный
6
Дата: Среда, 12.08.2015, 21:20 | Сообщение # 5
Код
margin-left: auto; margin-right: auto;

Пробуй


Профиль
CbIPoK Offline
Проверенный
37
Дата: Среда, 12.08.2015, 21:24 | Сообщение # 6
Цитата kefir ()
Пробуй


Это не поможет, т.к. изображение шире блока.

Посетите мой сайт и увидите информер, этот блок и нужно настроить. Ссылка


Помог? Ставь + в репутацию! :3
Профиль
ia-7 Offline
Проверенный
4
Дата: Среда, 12.08.2015, 22:33 | Сообщение # 7
Код
<div class="inform_block">  
<div class="inform_screen">  
<span class="image-wrap" style="position:relative; display:inline-block; background:url($IMG_URL1$) no-repeat center center; background-size: cover; width: 100%; height: 100%;  "><img src="$IMG_URL1$" alt="$TITLE$" style="opacity:0;"></span>
</div>  
</div>


Профиль
admin Offline
Гл. администратор
429
Дата: Четверг, 13.08.2015, 08:10 | Сообщение # 8
Код
<img src="$IMG_URL1$" width="165" height="165" alt="" style="object-fit:cover;" />


Помог? Ставь или поддержи проект.
Профиль
CbIPoK Offline
Проверенный
37
Дата: Четверг, 13.08.2015, 12:11 | Сообщение # 9
admin, УРААА!!! Ваше решение помогло, спасибо.
С меня плюс :)
Тему можно закрыть.


Помог? Ставь + в репутацию! :3
Профиль
Форум » Архив » Архив » Выравнение изображени в блоке.
Страница 1 из 11
Поиск: