Das Bild wird größer als das übergeordnete Element, obwohl die maximale Höhe auf 100% festgelegt ist

Ich versuche, ein -Tag zu verwenden, um ein Foto über einem anderen Teil anzuzeigen, als eine Art Overlay. Das Bild wird jedoch nicht so skaliert, dass es sich im übergeordneten div befindet (also dem Hauptteil der Seite). Stattdessen fließt es über den Körper. Wenn ich overflow: hidden; auf den Körper setze, kann nicht über die Seite geblättert werden. Ich möchte, dass das Bild voller Höhe ist und in den Körper passt (ohne den Körper zu vergrößern).Das Bild wird größer als das übergeordnete Element, obwohl die maximale Höhe auf 100% festgelegt ist

Dies ist im Grunde die Struktur der Seite:

<html> 
    <body> 
     <div class="imgContainer"> 
     <img class="actualImage" /> 
     </div> 
     <div class="restOfBody"> 
     </div> 
    </body> 
</html>

Und die CSS:

body { 
    background-image: url(*some background photo*) 
    background-repeat: no-repeat; 
    background-size: cover; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    max-height: 100%; 
} 

.imgContainer { 
    z-index: 2; 
    position: absolute; 
    top: 0; 
    left: 0; 
    max-height: inherit; 
} 

.actualImage { 
    max-height: 100%; 
}

Dies ist im Grunde, was jetzt geschieht: The image that is drawn over the text right now, pushes the page down so far, that it actually exceeds the body of the html.

Quelle

2016-08-13 Rink Stiekema

Warum nicht als Hintergrundbild, wie in Ihrem CSS? –

Weil ich mehrere Schichten haben möchte. Ich möchte folgendes Format haben: Hintergrund Overlay Bild Text Auf diese Weise wird der Text das Bild kommen, aber eine farbige div wird unter dem Bild gesetzt werden (wie der Hintergrund unter die gesetzt werden Bild). –

Bitte geben Sie [minimale, vollständige, reproduzierbare, Code] (http://StackOverflow.com/Help/Mcve) – Scott

Höhe in% wird nicht arbeiten Sie, bis Sie Meta für Höhe verwenden, ok verwenden Sie bitte Überlauf: versteckt an der Stelle des Überlaufs: keine

Quelle

2016-08-13 15:25:12

verwenden Sie Meta für Höhe in Kopf als auch für Breite dann funktioniert es –

tut mir leid, dass das meinte ich eigentlich. (Der Überlauf: keiner/versteckter Teil). Ich bin mir nicht ganz sicher, was du mit meta für Höhe meinst? –

Bitte verwenden Sie in :: - Und dann können Sie Max-Höhe = 100 schreiben % –

machen Sie Ihr Bild als Hintergrundbild. Ich denke, es wäre besser.

Quelle

2016-08-13 15:32:56 Smiley

Da ich den Z-Index verwenden möchte, um verschiedene Ebenen zu erstellen, ist dies keine Option. Vielen Dank für Ihren Kommentar, normalerweise wäre es eine gute Option –

In einen Container in Ihrem Körper, wie gezeigt,

<body> 
    <div class="container"> 
     <div class="imgContainer"> 
      <img class="actualImage" src="banner.jpg"> 
     </div> 
    </div> 
</body>

und tun dies in CSS

.container { 
    width: 200px;/*sample width*/ 
    height: 200px;/*sample height*/ 
    overflow: hidden; 
} 
.imgContainer { 
    position: relative; 
    top: 0; 
    left: 0; 
    max-height: inherit; 
}

Die .container zum Einstellen einer Grenze verantwortlich ist und durch overflow: hidden Verwendung verhindern Inhalte in .container zu Überlappung. Während im Fall von .imgContainer sicherstellen, dass die Position relativ zum Container ist, zieht sich absolut der Fluss heraus, was in Ihrem Fall nicht sicher ist.

Quelle

2016-08-13 15:33:19 Fil

Dies funktioniert nicht, die Überlappung passiert nicht horizontal, sondern vertikal. –

Ich hoffe, dass dies helfen wird – Fil

Aber wie stelle ich sicher, dass ich ansprechbar weiß, wie groß meine Container sollte sein? –

Das Bild wird größer als das übergeordnete Element, obwohl die maximale Höhe auf 100% festgelegt ist

Antwort

Verwandte Themen