Изменить размер img высота согласно div высота

Привет всем,Изменить размер img высота согласно div высота

У меня есть этот CSS, который действует странно, и я не понимаю почему. Пожалуйста, помогите undestand почему:

CSS

html body{ 
width:100%; 
height:100%; 
background-color:#000; 
margin:0; 
} 


.top 
{ 
margin-left:7.5%; 
margin-right:7.5%; 
height:8.1%; width:85%; 
position:relative; 
border-bottom:#FFFFFF solid thin; 
} 
.top img 
{ 
height:100%; 
}

HTML:

<body> 
<div class="top" align="center"> 
<img src="images/titlu_trans.png" alt="Sigla companie Calin Events"/> 
</div>

Теперь Safari интерпретируют-х это правильно, установив высоту Див до 8,1% от общей высоты разрешения, а затем IMG высота на 100% от высоты div, что составляет 8,1% разрешения просмотра. Но Chrome, на машине Windows, не делает этого и интерпретирует это, установив высоту img на 100% высоты разрешения просмотра. Почему это происходит?

источник

2013-09-25 s.calin

Что вы подразумеваете под "разрешением просмотра"? – SunSparc

Вам нужно определить размер как html, так и тела.

Изменение html body{ в html, body{ (обратите внимание на запятую)

http://jsfiddle.net/FXhPZ/

источник

2013-09-25 16:18:51 Moob

Я не вижу никаких проблем с моей последней Chrome, используя код выше. Изображение изменилось правильно, пропорционально div.

Другим решением является установить изображение в качестве фона, а также использовать

background-size: cover;

или

background-size: contain;

Обратите внимание, что этот метод работает только в современных браузерах. Ссылка: http://www.w3schools.com/cssref/css3_pr_background-size.asp

источник

2013-09-25 16:23:39

Изменить размер img высота согласно div высота

ответ

Смежные вопросы