Füllen Sie ein div mit einem repononsive <img> und positionieren Sie zentral

Question

Wie kann ich sicherstellen, dass die img innerhalb des Containers ist zentriert und skaliert korrekt von Handy zu Desktop? Hier ist ein demo on Codepen. Maßstab Handy um besser zu verstehen, das Problem

HTML

<div class="image-container"> 
    <img src="https://placeimg.com/470/310/people" alt="" /> 
</div> 

CSS

.image-container{ 
width: 100%; 
height: 500px; 
max-height: 500px; 
background: red; 
overflow: hidden; 
text-align: center; 
position: relative; 
display: block; 
} 

img{ 
height: auto; 
width: 100%; 
max-width: 100%; 
position: absolute; 
top: -50%; 
left: 0; 
} 

Ich frage dies, weil das Bild, um es auf mobile Höhe verliert und sieht nicht korrekt. Ich habe so etwas wie 'Hintergrundgröße: Cover'. Ich würde das Bild gerne den Behälter vollständig

Answer 1

Zur Mitte Bild füllen horizontal und vertikal innerhalb div Sie transform: translate(-50%, -50%)top: 50% und left: 50% und dann fügen Sie einfach einstellen.

Um ein Bild responsiv zu machen, können Sie max-width: 100% verwenden und standardmäßig ist die Höhe automatisch.

.image-container { 
 
    width: 100%; 
 
    height: 500px; 
 
    background: red; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="image-container"> 
 
    <img src="https://placeimg.com/470/310/people" alt="" /> 
 
</div>

Andere Option ist Flexbox zu verwenden, wenn Sie nicht relative/absolute Position verwenden möchten, aber in Reaktion auf zu halten img Sie object-fit: contain mit height: 100%

.image-container { 
 
    width: 100%; 
 
    height: 500px; 
 
    background: red; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    object-fit: contain; 
 
}

<div class="image-container"> 
 
    <img src="https://placeimg.com/470/310/people" alt="" /> 
 
</div>

verwenden können

Wenn Sie img wollen wie background-size: cover ein Weg, um das verhalten ist object-fit: cover mit height: 100% und width: 100%

body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.image-container { 
 
    width: 100%; 
 
    height: 500px; 
 
    background: red; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
img { 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
}

<div class="image-container"> 
 
    <img src="https://placeimg.com/470/310/people" alt="" /> 
 
</div>

Answer 2

Sie margin:0 auto; Mitte horizontal auszurichten hinzufügen zu verwenden. Remove width:100%, da dies die Breite eines Bildes streckt, wenn Sie es nicht möchten. Halten Sie height:auto, um mit width einzustellen.

.image-container{ 
 
    width: 100%; 
 
    height: 500px; 
 
    max-height: 500px; 
 
    background: red; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    position: relative; 
 
    display: block; 
 
} 
 

 
img{ 
 
height: auto; 
 
max-width: 100%; 
 
margin:0 auto; 
 
}

<div class="image-container"> 
 
    <img src="https://placeimg.com/470/310/people" alt="" /> 
 
</div>