Привіт всім,
У мене є цей CSS, який діє дивно, і я не розумію, чому. Будь ласка, допоможіть скасувати, чому:
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/images/titlu_trans.png" alt="Sigla companie Calin Events"/>
</div>
Тепер Safari інтерпретує це правильно, встановившивисота div до 8,1% від загальної висоти роздільної здатності, а потім висота img на 100% висоти div, тобто 8,1% дозволу перегляду. Але Chrome на машині Windows цього не робить і не інтерпретує, встановлюючи висоту img на 100% від висоти роздільної здатності перегляду. Чому це відбувається?
Відповіді:
1 для відповіді № 1Вам потрібно розмір як html, так і корпусу.
Змінити html body{ до html, body{ (зверніть увагу на коми)
0 для відповіді № 2
Я не бачу проблем із моїм останнім Chrome, використовуючи ваш код вище. Зображення змінили розмір належним чином, пропорційно ділу.
Ще одне рішення - встановити зображення як тло та використовувати
background-size: cover;
або
background-size: contain;
Зауважте, що цей метод працює лише в сучасних браузерах. Довідка: http://www.w3schools.com/cssref/css3_pr_background-size.asp