Höhe des Bildes in absoluten div?

Safari für Windows wird nicht in die Berechnung img height korrekt in absolut positionierten div. Das styling funktioniert über Chrome und Firefox.

http://jsfiddle.net/Wh2Tr/

HTML:

<div class="image">
  <div class="image-inner">
    <img src="http://lorempixel.com/400/200" />
  </div>
</div>

CSS:

.image {
    position: relative;
    max-width: 100%;
    height: 0;
    padding-bottom: 75%;
}

.image-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.image img {
    width: auto;
    max-height: 100%;
    margin: 0 auto;
    display: block;
}

Vorsichtsmaßnahmen:

  1. Dies ist eine Vereinfachung von HTML. Es sind mehrere Bilder in unterschiedlichen Größen müssen die gleiche Höhe haben (also mit width:100%;height:auto; funktioniert nicht)
  2. Dies muss adaptive/responsive, also kann ich nicht festlegen, dass eine explizite Breite oder Höhe auf das Bild oder den container.
InformationsquelleAutor impleri | 2013-11-07
  1. 1

    Gleiche problem habe ich verwendet jquery. Ich konnte keine Lösung bis jetzt:

    $('.image-inner').css('height','100%').height($('.image-inner').height());
    InformationsquelleAutor Gigi Ionel
  2. 0

    Auf die Klasse image und setzen die Höhe auf auto. Das sollte es beheben. http://jsfiddle.net/Wh2Tr/1/

    .image {
    position: relative;
    max-width: 100%;
    height: auto;
    padding-bottom: 75%;
}
    • Nicht. Ich brauche, um eine einheitliche Höhe für das Bild (wird geschaltet über JS aber nicht notwendig ist, um das problem zu demonstrieren).
    • Ok, gut, dann legen Sie Breite und Höhe für das element
    • Ihre Frage nicht erklären, dass Sie brauchte das.
    • Du hast Recht, dass ich nicht erklären, das habe ich gebraucht. Ich dachte, es wäre albern zu sagen, dass ich versuchte, das offensichtliche und einfacher Lösungen. Ich sollte auch erwähnt haben, es muss reagiert werden, das ist der Grund, warum alles ist in % und nicht in Breite und Höhe festgelegt sind.
    InformationsquelleAutor dowomenfart
Schreibe einen Kommentar