Platziere Bild zwischen 2 Divs (zentriert auf dem Bildschirm, reaktionsfähig und nicht über Text)

Ich versuche ein Bild zwischen 2 Divs auf meiner Seite zu platzieren. Ich habe zur Zeit ein Bild zwischen den beiden divs in der Lage zu bekommen, aber es ist nicht ansprechbar (nur in der richtigen Position auf 1920 Breite) und überlappt den Text der beiden divs:Platziere Bild zwischen 2 Divs (zentriert auf dem Bildschirm, reaktionsfähig und nicht über Text)

screenshot from my website

css

.btwimg { 
    width: 90%; 
    height: auto; 
    position: absolute; 
    transform: translate3d(-20%, -50%, 0); 
    z-index: 1; 
    left: 50%; 
    background: url("../img/lara2.png"); 
    background-repeat: no-repeat; 
    box-shadow: 0 5px 7px rgba(0,0,0,0.1); 
}

html

<div class="btwimg"> 
    <img src="img/lara2.png"> 
</div>

what I am trying to achieve

Kann ich erreichen, wonach ich suche? Vielen Dank im Voraus.

Quelle

2017-07-24 Necro HD

geben padding Ihre Texte. –

Ich sehe keine zwei Divs in der Markup, die Sie geben. Was ist der Zweck der div um die img? Wo ist das CSS für die anderen divs? Was meinst du mit "ansprechend"? In den meisten Fällen meinen die Leute wirklich "adaptiv", aber was sollen diese Elemente wann tun? – Rob

Zuerst müssen Sie die gleiche Menge padding-bottom zum oberen DIV und padding-top zum nachfolgenden DIV hinzufügen, um genügend Platz für Ihr Bild zu schaffen. (Versuch und Irrtum, um die richtige Menge zu finden)

Ihre btwing DIV sollte ein Kind Element der nachfolgenden DIV sein. Dann sollten diese CSS arbeiten:

.btwimg { 
    width: 90%; 
    height: 250px /* Just a random guess - Needs a fixed height! */ 
    position: absolute; 
    z-index: 1; 
    left: 50%; 
    top: -50%; 
    transform: translate(-50%, -50%); 
    background: url("../img/lara2.png"); 
    background-repeat: no-repeat; 
    box-shadow: 0 5px 7px rgba(0,0,0,0.1); 
}

Tatsächlich ist die height Einstellung ein calc Wert sein soll, die von der ursprünglichen Breite/Höhe Anteil und 90% Breite eingestellten abgeleitet wird, wie height: calc(9/16 * 90%);, wenn der Anteil 16/9 ist

Quelle

2017-07-24 19:42:20 Johannes

, um es reagieren zu lassen, verwenden Sie die Position als relativ. –

@DhavalJardosh nein - dann würden Sie die Überlappung/teilweise Abdeckung der anderen DIVs verlieren – Johannes

nahm ich @Johannes Antwort und zwickte ein wenig das Ergebnis wollte ich erhalten:

.btwimg { 
max-width: 800px; 
min-width: 300px; 
height: 16vw; 
position: absolute; 
z-index: 1; 
left: 50%; 
top: calc(2vw - 38px); /* keeps div roughly centred at all target resolutions */ 
transform: translate(-50%, -50%); 
}

Früher habe ich eher ein Bild dann als ein Hintergrund der Wieder Sizing zu erleichtern.

.btwimg img { 
height: auto; 
width: 100%; 
}

btwimg wurde als empfohlen

als Kind des 2. div setzen

result at mobile resolutions

result at desktop resolutions

Quelle

2017-07-24 21:32:37

Platziere Bild zwischen 2 Divs (zentriert auf dem Bildschirm, reaktionsfähig und nicht über Text)

Antwort

Verwandte Themen