X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> img vertical-align
LeeSwagger
LeeSwagger
Topic Starter сообщение 11.1.2012, 22:33; Ответить: LeeSwagger
Сообщение #1


Люди, всем привет!
Есть проблема, уже запарился.

Есть div со style="width:200mm; height:200mm" (например, размеры дива заданы всегда).
Внутри него есть img у которого в зависимости от ситуации выставляется height=100% (т.е. растяжение по высоте на весь div), либо width=100%(растяжение по ширине).

Как сделать vertical-align работающий? Я так понял универсального решения для всех браузеров нету=(
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
LeeSwagger
LeeSwagger
Topic Starter сообщение 13.1.2012, 4:04; Ответить: LeeSwagger
Сообщение #2


47 просмотров, но ни кто не ответил))

вот мое решение:

написал javascript код, который вставляется в конце боди, т.е. он выполняется после того как все картинки загрузятся на страницу.

[JS]<script language="javascript" type="text/javascript">
var imgs=document.getElementsByTagName("img");
for(var i=0;i<imgs.length;i++)
{
var wi=imgs[i].width;
var hi=imgs[i].height;
var wp=imgs[i].parentNode.offsetWidth;
var hp=imgs[i].parentNode.offsetHeight;
if(hi<hp)
{
imgs[i].style.marginTop = Math.ceil((hp - hi)/2)+ 'px';
}
else
if(hi>hp)
{
imgs[i].style.marginTop = -Math.ceil((hi - hp)/2) + 'px';
}
if(wi>wp)
{
imgs[i].style.marginLeft=-Math.ceil((wi-wp)/2)+'px';
}
}
</script>
[/JS]

Использовал для такого:
<div style=" border-radius:10px; position:absolute; top:10mm; left:10mm;width:200mm; height:100mm; overflow:hidden; padding:0mm; ">
<img src="C:\1689697.jpg" style="width:100%; ">
</div>

Данный код выравнивает по вертикали все img на странице внутри дочерних блочных элементов( например div).

Если что не так - поправте.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
texno
texno
сообщение 13.1.2012, 6:12; Ответить: texno
Сообщение #3


Я бы в таблицу картинки засунул и использовал бы vertical-align для TD.
Или ДИВы с position:relative;, а картинки с position:absolute;
Само бы всё стало на место.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Резиновая вёрстка + img
3 LWDM 3654 26.9.2012, 17:53
автор: -Bugnet-
Открытая тема (нет новых ответов) img>img;img;img через onmouseover
1 Langepas_hb 8708 4.11.2008, 1:29
автор: -Galen-


 



RSS Текстовая версия Сейчас: 29.3.2024, 3:16
Дизайн