Max-height игнорируется в Firefox, работает в Chrome и Safari

Я делаю слайд-шоу изображений с классом display. Я хочу ограничить высоту и ширину изображения до 80% от окна, так что нет необходимости в полосе прокрутки любого нормального размера. Здесь CSS, который я использовал:

.display {
    max-width: 80%;
    max-height: 80%;
}

Он работает точно так, как я хочу, чтобы он работал в Chrome и Safari, а Firefox также признает максимальную ширину. Но Firefox игнорирует максимальную высоту, поэтому большие вертикальные изображения уходят с экрана.

Большое спасибо за любую помощь.

Ответ 1

Вам нужно сообщить обозревателю о высоте html и высоте body. Затем он вычисляет высоту, основанную на этих размерах. Следующие работы отлично подходят для всех луков.

html { height: 100%; }

body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

.display {
    max-width: 80%;
    max-height: 80%;
    overflow: hidden;
}

Здесь есть рабочий пример: http://jsfiddle.net/P7wfm/

Если вы не хотите обрезать изображение, если они превышают 80% высоты или ширины, установите высоту img на

.display img {
    min-height: 100%;
    min-width: 100%;
}

Ответ 2

Я согласен с @Uds, вам нужно указать высота и width элемента body и html

Другое дело:

Кроме того, вам также необходимо определить браузер в коде CSS, вы можете определить его следующим образом:

.display{
  /* For general browser */
  max-width: 80%;
  max-height: 80%;

  /* For Firefox browser */
  -moz-width: 80%;
  -moz-height:80%;

  /* For Chrome and Safari browser */
  -webkit-width: 80%;
  -webkit-height:80%;

  /* For Opera browser */
  -o-width: 80%;
  -o-height:80%;
}

Это будет указать, какой браузер должен иметь высоту или ширину.

Ответ 3

Вам нужно установить высоту для элемента контейнера или тела:

body {
    height:100%;
    min-height:100%;
}

Ответ 4

У меня была такая же проблема сегодня, но с приятным поворотом, что я не мог установить все родительские элементы на высоту 100%.
Я нашел ключ к другому решению этой проблемы:

https://developer.mozilla.org/en-US/docs/Web/CSS/max-height

Вы можете назначить не только% max-height, но и "em", поэтому, если вы установите свой html и body на размер шрифта 100%, это будет похоже на percental width.

<div>
 <p>
    <img src="" alt="">    
 </p>
</div>

html,body{
font-size: 100%;
}

img{
max-width: 100%;
max-height: 50em;
}

DEMO