Bildposition entspricht Hintergrund Position

Question

ich auf einer Website arbeite, und ich möchte ein Bild gestalten, wie Sie einen Hintergrund mit Hintergrund-Position Stil: Mitte. Gibt es ein Äquivalent für ein normales Bild?

Dank im Voraus,

Luuk

EDIT:

Das Bild anspricht, und in einem Behälter enthalten ist.

CSS:

.img-container { 
max-height: 300px; 
overflow: hidden; 
} 

.img-container img { 
max-height: 100%; 
max-width: 100%; 
} 

Answer 1

Ich würde so etwas tun zentriert um das Bild zu positionieren.

.img-container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    max-height: 300px; 
    overflow: hidden; 
} 

.img-container img { 
    max-height: 100%; 
    max-width: 100%; 
} 

Answer 2

Sie könnten für die Anzeige flex gehen, aber die Unterstützung für den Internet Explorer ist ziemlich katastrophal. Wenn Sie sich für die Browser-Unterstützung interessieren (was Sie tun sollten), gehen Sie stattdessen für das folgende Beispiel vor.

<div class="list"> 
    <div class="item"> 
    <img src="https://unsplash.it/50/40" alt="">  
    </div> 
    <div class="item"> 
    <img src="https://unsplash.it/50/60" alt=""> 
    </div> 
    <div class="item"> 
    <img src="https://unsplash.it/50/30" alt=""> 
    </div> 
    <div class="item"> 
    <img src="https://unsplash.it/50" alt=""> 
    </div> 
</div> 

Sass:

.list { 
    text-align: center; 
} 

.item { 
    position: relative; 
    display: inline-block; 
    vertical-align: top; 
    height: 5rem; 
    width: 5rem; 
    background: red; 

    img { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    } 
} 

Stellen Sie sicher, auch die Präfixe für die Transformation Attribut hinzufügen.

Fiddle: https://jsfiddle.net/k433b6up/

Answer 3

Ihr gewünschtes Ergebnis nicht ganz klar ist, aber hier sind einige Optionen für zwei verschiedene Interpretationen:

die Anzeigeeigenschaft des Bildes ändern und die Textausrichtung an seinen Container Einstellung es ist beibehalten nativer Höhe und Breite, während es in den Behälter Zentrierung:

.img-container { 
    max-height: 300px; 
    overflow: hidden; 
    text-align: center; 
} 

.img-container img { 
    display: inline-block; 
    max-height: 100%; 
    max-width: 100%; 
} 

Demo: https://jsfiddle.net/5suo8tbw/

Wenn Sie versuchen, einen Hintergrund zu erreichen füllen mit einem img Element Sie das object-fit: cover Attribut in Betracht ziehen sollten. Dies füllt immer die Abmessungen Ihres Containers, behält das Seitenverhältnis des Bildes bei und zentriert es im Container.

.img-container { 
    max-height: 300px; 
    overflow: hidden; 
} 

.img-container img { 
    object-fit: cover; 
    height: 100%; 
    width: 100%; 
} 

Demo: https://jsfiddle.net/5suo8tbw/1/

Hier ist ein Link zu der Spezifikation: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Für Cross-Browser-Unterstützung, die polyfill Besuche: https://github.com/anselmh/object-fit