Максимальная высота игнорируется в Firefox, работает в Chrome и Safari

Question

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

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

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

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

Answer 1

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

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 height на

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

Answer 2

Я согласен с @ Uds , вам нужно будет указать высоту и ширину элемента 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%;
}

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

Answer 3

Попробовал предложенные решения безуспешно, в Firefox 62.0 анимация максимальной высоты игнорируется.

Существует также задержка при изменении свойства максимальной высоты в соответствии с продолжительностью анимации.

Answer 4

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

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

Answer 5

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

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

Вы можете назначить не только% на максимальную высоту, но и «em», так что если вы установите свой HTMLи тело с размером шрифта 100% это работает подобно ширине в процентах.

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

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

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

DEMO