Größe anpassen, um Bild in div zu passen, und horizontal und vertikal zentrieren

Question

Ich habe ein Bild in einem div. Ich möchte, dass das Bild sich an das div anpasst und horizontal und vertikal zentriert ist. Ich hätte gerne eine Lösung, die in ie >= 8 funktioniert.

Answer 1

Dies ist eine Möglichkeit, es zu tun:

Hier ist das Beispiel: http://jsfiddle.net/4Mvan/1/

HTML:

CSS:

.container {
    margin: 10px;
    width: 115px;
    height: 115px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}
.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

Answer 2

Nur getestet in Chrome 44.

Beispiel: http://codepen.io/hugovk/pen/OVqBoq

HTML:

CSS:

img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 100%;
    max-height: 100%;
}

Answer 3

NICHT VON IE UNTERSTÜTZT

Weitere Informationen hier: Kann ich verwenden?

.container {
  overflow: hidden;
  width: 100px;
  height: 100px;
}

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

Answer 4

LÖSUNG

.container {
    margin: 10px;
    width: 115px;
    height: 115px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
    background-image: url("http://i.imgur.com/H9lpVkZ.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

}