centré horizontalement et verticalement Responsive image

Question

J'essaie d'obtenir une image centrée horizontalement et verticalement dans un div de hauteur et de largeur variables.

Maintenant, l'image doit également être réactive et ajuster si la hauteur et/ou la largeur du conteneur est inférieure à la hauteur ou la largeur des images.

Après des recherches, en passant par toutes les différentes « solutions » là-bas et tripoter une solution, je ne pouvais pas trouver le parfait, mais deux sont venus près:

1.) Ce premier ne tout ce qu'il faut, sauf lorsque la largeur de la fenêtre est plus petite que la largeur de l'image, l'image ne soit plus alignée horizontalement:

http://jsfiddle.net/me2loveit2/ejbLp/8/

HTML

<div class="overlay"> 
    <div class="helper"></div> 
    <img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable"> 
</div> 

CSS

.helper { 
    height:50%; 
    width:100%; 
    margin-bottom:-240px; 
    min-height: 240px; 
} 
.overlay { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    cursor: pointer; 
    background-color: rgba(0, 0, 0, 0.5); 
} 
img { 
    margin: 0 auto; 
    max-width: 100%; 
    max-height: 100%; 
    display: block; 
} 

2.) Ce second exemple permet de rester tout aligné, mais l'image ne diminue pas lorsque la hauteur est inférieure à la hauteur de l'image:

http://jsfiddle.net/me2loveit2/ejbLp/9/

HTML

<div id="outer"> 
    <div id="container"> 
     <img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable"> 
    </div> 
</div> 

CSS

#outer { 
    height:100%; 
    width:100%; 
    display:table; 
    position:fixed; 
    top:0px; 
    left:0px; 
    background-color: rgba(0, 0, 0, 0.5); 
} 
#container { 
    vertical-align:middle; 
    display:table-cell; 
    max-width: 100%; 
    max-height: 100%; 
} 
img { 
    margin: 0 auto; 
    max-width: 100%; 
    max-height: 100%; 
    display:block; 
} 

Answer 1

J'ai essayé dans le passé et la seule solution non-JS Je suis venu avec (ce qui est frowned upon, par la voie) est la suivante:

html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 

body { 
    display: table; 
} 

.container { 
    display: table-cell; 
    vertical-align: middle; 
    border: 1px solid #f00; 
} 

.container > div { 
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
    border: 1px solid #00f; 
    max-width: 550px; 
    max-height: 480px; 
    background: url("http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable") 50% 50% no-repeat; 
    background-size: contain; 
} 

<div class="container"><div></div></div> 

http://jsfiddle.net/pYzBf/1/

Définissez la couleur d'arrière-plan du div sur le noir pour voir la mise à l'échelle sans les bords de l'image. J'ai utilisé ces dimensions pour que vous puissiez le tester en redimensionnant le cadre.