Max-height ignoriert Firefox, funktioniert in Chrome und Safari

Mache ich eine Diashow der Bilder mit der Klasse display. Ich will zur Begrenzung der Höhe und Breite des Bildes maximal 80% des Fensters, so dass es keine Notwendigkeit für eine Bildlaufleiste bei jedem normalen Größe. Hier ist die CSS, die ich verwendet habe:

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

Es funktioniert genau so, wie ich will, es funktioniert in Chrome und Safari, und Firefox erkennt die max-width als auch. Aber Firefox ignoriert die max-Höhe, so große vertikale Bilder gehen aus dem Bildschirm.

Vielen Dank für jede Hilfe.

InformationsquelleAutor Forrest | 2010-10-13

  1. 9

    Müssen Sie dem browser mitteilen, über html Höhe und Körper Höhe. Dann berechnet die Höhe auf Basis dieser Größen. Das folgende funktioniert auf allen bowers. 

    html { height: 100%; }

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

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

    Gibt es ein funktionierendes Beispiel hier: http://jsfiddle.net/P7wfm/

    Wenn Sie nicht möchten, dass Bild zu beschneiden, wenn Sie mehr als die 80% der Höhe oder Breite festgelegt img-Höhe

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

    InformationsquelleAutor nasty

  2. 3

    Ich Stimme mit @Uds, Sie müssen angeben, dass die Höhe und Breite der body und html element

    Andere Sache im Auge zu behalten:

    Darüber hinaus werden Sie auch brauchen, um zu definieren, den browser im CSS-code können Sie definieren es, indem Sie verfolgen:

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

    Diese wird angeben, dass die browser haben sollte, welche Art von Höhe oder Breite.

    Die Angabe der Höhe am Körper fixiert es für mich. Keine Breite Erklärung, die nötig war. Danke.

    InformationsquelleAutor

  3. 1

    Müssen Sie die Höhe für das container-element oder Körper:

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

    InformationsquelleAutor Māris Kiseļovs

  4. 1

    Versucht die vorgeschlagenen Lösungen ohne Erfolg, auf Firefox 62.0, max-Höhe animation ignoriert.

    Gibt es auch eine Verzögerung, wenn die max-height-Eigenschaft wird geändert matching die Dauer der animation.

    InformationsquelleAutor Julio Garcia

  5. 0

    Ich hatte das gleiche problem heute aber mit der schönen Wendung, die ich konnte nicht setzen alle elterlichen Elemente bis zu einer Höhe von 100%.


    Ich fand einen Hinweis auf eine andere Lösung für dieses problem hier:

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

    Zuordnen können Sie nicht nur % auf max-Höhe, aber auch "em", so dass, wenn Sie Ihre html-und body eine Schriftgröße von 100% dies funktioniert ä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

    InformationsquelleAutor Maximilian Lindsey

Schreibe einen Kommentar