max-height: x% не работает в Chrome

Мне нужно использовать стиль CSS, как max-width:90% и max-height:90%, чтобы определить размер изображения, не переполняющий окна. Тем не менее, это хорошо работает на Safari, но не работает на Chrome. Вот демо, которое я пишу на jsfiddle: http://jsfiddle.net/hello2pig/rdxuk7kj/

<style>
div{
    padding: 0;
    margin: 0;
}
.slide{
    text-align:center; 
    background-size: 100% 100%;
}
.user-img{
    max-height: 80%;
    max-width: 90%;
}
</style>

<body>
   <div class="slide">
      <div id="container0" class="container slideDown front">
         <div class="image-container">
         <img src="http://people.cs.clemson.edu/~bli2/hiOne/image/userImage/1.jpg" class="user-img" ></img>         
         </div>                 
      </div>
   </div>
</body>

Если вы откроете эту демонстрацию в Safari, все изображение может быть отображено, но изображение переполняет окно в Chrome. Любой способ решить проблему? Спасибо за вашу помощь!

Источник

2 ответа

Решение

Иногда использовать проценты для текучести в макетах сложно, потому что вам приходится иметь дело с контейнерами и вещами типа границы.

Вы можете предпочесть использовать единицы просмотра. Вы можете узнать о них на css-tricks, и caniuse покажет вам, насколько хорошо он поддерживается.

По сути, вы можете сказать:

<div style="height: 55vh;">Hi</div>

означает элемент div с высотой 55vh, где 1vh определяется как значение 1% высоты области просмотра. То, что составляет 100vh, будет на 100% высоты окна просмотра.

Источник

Вам нужно дать явное значение для контейнера. Это будет работать:

.image-container {
    width: 500px;
    height: 300px;
}

В вашем случае% берется с <html> элемент в скрипке.

От MDN:

процент

Процент рассчитывается относительно высоты содержащего блока. Если высота содержащего блока не указана явно, процентное значение обрабатывается как none.

Источник
Другие вопросы по тегам