Wie die Höhe des Elternelements auf das enthaltene Bild beschränkt wird

Question

Etwas quält mich schon lange. Ich finde einfach keine Möglichkeit, Bilder an die Größe der Eltern anzupassen.

Ich habe hier viele Fragen gestellt, aber keine gab mir die Antwort, die ich brauche.

Einige dieser Fragen sind:

CSS same height as Parent
Fit image to parent div's size
How can I resize an image dynamically with CSS as the browser width/height changes?
CSS: How can I set image size relative to parent height?
CSS: 100% width or height while keeping aspect ratio?
Make an image to fit it's parent dimensions
CSS: How can I set image size relative to parent height?

Nun ist das Problem, dass, wenn ich ein Bild in ein Elternelement einfügen, die Eltern nur nicht in der Höhe strecken.

Ein Bild:

http://es.tinypic.com/view.php?pic=2s1u1ec&s=9#.WLnbWvKE1jk

Ich versuche, ein Bild Schieber zu bauen, und das img müssen absolut positioniert.

Rote Umrandung sollte das Bild umbrechen, und das übergeordnete Element sollte das gesamte Bild und das Padding umschließen.

Einige Code:

HTML:

<section> 
Gray: parent 

    <div class="level0"> 
     <div class="container"> 
      <img src="1.jpg" alt="image"> 
     </div> 
    </div> 

</section> 

CSS:

* { 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
} 

html, body { 
    width: 100%; 
    height: auto; 

    background-color: #565656; 
} 

section { 
    position: relative; 
    width: 100%; 
    max-width: 1300px; 
    height: 100%; 
    margin: 0 auto; 
    padding: 1%; 

    background-color: #a1a4a8; 
} 

.level0 { 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

.container { 
    position: relative; 
    width: 100%; 
    height: 100%; 

    border: 4px solid red; 
} 

.level0 img { 
    position: absolute; 
    width: 100%; 
} 

Ich habe versucht, Überlauf: versteckt, Max-Höhe,%, etc. Das einzige, was tatsächlich funktioniert, ist eine feste Höhe auf das Elternelement festlegen, aber das ist nicht gut für mich. Ich möchte, dass der Elternteil seine Höhe automatisch an die Breite des Bildes anpasst.

Oh, noch eine Sache. Ich lese verschiedene JQuery, JS oder ähnliche Antworten, aber ich würde reine CSS Antworten zu schätzen wissen. Offensichtlich muss mir etwas fehlen.

Bitte lassen Sie mich wissen, wenn etwas verwirrend ist. Danke für die Hilfe!

Answer 1

Sie können das Bildseitenverhältnis als Prozentsatz erhalten, indem Sie die Höhe durch die Breite dividieren.Verwenden Sie dann das Padding für das Bildelternteil, um die gleiche Form des Seitenverhältnisses für das übergeordnete Element zu erstellen, und es passt natürlich zum Seitenverhältnis des Bilds.

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
img, a { 
 
    text-decoration: none; 
 
    border: none; 
 
} 
 

 
html, body { 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: #565656; 
 
} 
 

 
section { 
 
    position: relative; 
 
    width: 100%; 
 
    max-width: 1300px; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    padding: 1%; 
 
    background-color: #a1a4a8; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    height: 0; 
 
    padding-top: 56.29510826%; 
 
    position: relative; 
 
} 
 

 
.level0 img { 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    width: 100%; 
 
}

<section> 
 
Gray: parent 
 

 
    <div class="level0"> 
 
     <div class="container"> 
 
      <img src="https://image.ibb.co/kZtbMF/Screen_Shot_2017_03_03_at_3_32_11_PM.png" alt="image"> 
 
     </div> 
 
    </div> 
 

 
</section>

Answer 2

Ich glaube nicht, dass es eine Möglichkeit gibt, ein absolut positioniertes Bild dynamisch unterzubringen. Sie müssen dem Container eine festgelegte Höhe geben, die größer als das Bild ist.

EDIT: @Michael Coker bewies, dass es einen Weg gibt, es zu tun, aber es ist ein quadratischer Pflock in einem runden Loch, wenn Sie mich fragen, obwohl geschickt seinerseits.