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>
Если вы откроете эту демонстрацию в сафари, можно отобразить изображение целиком, но изображение переполнит окно в Chrome. Любой метод решения проблемы? Спасибо за вашу помощь!
Ответы
Ответ 1
Несколько раз использование процентов для текучести в макетах сложно, потому что вам приходится иметь дело с контейнерами и вещами пограничного типа.
Возможно, вы захотите использовать единицы просмотра. Вы можете узнать о них на css-tricks и caniuse покажет вам, насколько хорошо он поддерживается.
По существу вы можете сказать:
<div style="height: 55vh;">Hi</div>
означает элемент div с высотой 55vh, где 1vh определяется как значение 1% высоты видового экрана. То, что составляет 100vh, будет составлять 100% высоты просмотра.
Ответ 2
Вам нужно указать явное значение для контейнера. Это будет работать:
.image-container {
width: 500px;
height: 300px;
}
В вашем случае% берется из элемента <html> в скрипте.
Из MDN:
Процент
Процент рассчитывается по высоте содержащий блок. Если высота содержащего блока не является явно указано, процентное значение рассматривается как none.
