Max-Höhe wird in Firefox ignoriert, funktioniert in Chrome und Safari

Question

Ich mache eine Diashow von Bildern mit der Klasse display . Ich möchte die Höhe und Breite des Bildes auf maximal 80 % des Fensters begrenzen, so dass bei normaler Größe keine Bildlaufleiste erforderlich ist. Hier ist das CSS, das ich verwendet habe:

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

Es funktioniert genau so, wie ich es in Chrome und Safari haben möchte, und auch Firefox erkennt die maximale Breite an. Aber Firefox ignoriert die max-Höhe, so dass große vertikale Bilder aus dem Bildschirm verschwinden.

Vielen Dank für jede Hilfe.

Answer 1

Sie müssen dem Browser Folgendes mitteilen html Höhe und Körper Höhe. Dann wird die Höhe auf der Grundlage dieser Größen berechnet. Das Folgende funktioniert bei allen Bögen gut.

html { height: 100%; }

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

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

Hier gibt es ein funktionierendes Beispiel: http://jsfiddle.net/P7wfm/

Wenn Sie nicht möchten, dass Bilder beschnitten werden, wenn sie die Höhe oder Breite von 80% überschreiten, setzen Sie img height auf

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

Answer 2

Ich stimme zu mit @Uds angeben, müssen Sie die Höhe y Breite der body y html Element

Eine weitere Sache, die Sie beachten sollten:

Außerdem müssen Sie den Browser im CSS-Code definieren, den Sie wie folgt festlegen können:

.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%;
}

Dies wird angeben. dass welcher Browser welche Höhe oder Breite haben sollte.

Answer 3

Sie müssen die Höhe für das Container-Element oder den Körper festlegen:

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

Answer 4

Habe die vorgeschlagenen Lösungen erfolglos ausprobiert, bei Firefox 62.0 wird die Max-Höhe-Animation ignoriert.

Es gibt auch eine Verzögerung, wenn die Eigenschaft "maximale Höhe" entsprechend der Dauer der Animation geändert wird.

Answer 5

Ich hatte heute das gleiche Problem, allerdings mit dem netten Nebeneffekt, dass ich nicht alle elterlichen Elemente auf eine Höhe von 100 % setzen konnte.
Ich habe hier einen Hinweis auf eine andere Lösung für dieses Problem gefunden:

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

Sie können nicht nur % der maximalen Höhe zuweisen, sondern auch "em". Wenn Sie also für html und body eine Schriftgröße von 100 % festlegen, funktioniert dies ähnlich wie eine prozentuale Breite.

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

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

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

DEMO