Comment recadrer et centrer une image pleine hauteur lorsque je ne connais pas les dimensions du conteneur?

Question

Il y a quelques questions là-bas qui montrent comment la culture et au centre des images, mais je n'ai pas trouvé un qui correspond à ces exigences:

• La partie visible de l'image doit être carrée.
• L'image doit être mise à l'échelle afin que la hauteur totale soit affichée et remplisse la hauteur du conteneur.
• La taille du conteneur est variable et déterminée par la largeur de son conteneur.
• L'image doit être centrée.

L'objectif final est d'avoir une grille avec 3 images carrées dans une rangée qui rétrécissent en fonction de la largeur du navigateur.

Voici ce que j'ai jusqu'ici.

.i-om-section-content { 
 
    max-width: 800px; 
 
    border: 3px solid blue; 
 
    margin: 0 auto; 
 
    padding: 0 32px; 
 
    padding: 0 3.2rem; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
.i-om-item { 
 
    overflow: hidden; 
 
    margin: 10px; 
 
    position: relative; 
 
    width: 32.5%; 
 
    height: 0; 
 
    padding-bottom: 32.5%; 
 
    border: 1px solid; 
 
    float: left; 
 
} 
 
img { 
 
    position: absolute; 
 
    left: -100%; 
 
    right: -100%; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    min-height: 100%; 
 
    min-width: 100%; 
 
}

<div class="i-om-section-content"> 
 
    <div class="i-om-item"> 
 
    <img src="http://onetaste.us/wp-content/uploads/2015/10/DSC2641.png" /> 
 
    </div> 
 
    <div class="i-om-item"> 
 
    <img src="http://onetaste.us/wp-content/uploads/2015/10/smita.png" /> 
 
    </div> 
 
</div>

JSFiddle

Answer 1

D'une manière générale, si vous voulez plus d'avance recadrage/positionnement/dimensionnement des images, il est beaucoup plus facile de travailler avec eux comme des images d'arrière-plan. background-size:auto 100% signifie "largeur automatique, pleine hauteur", le reste était ce que vous aviez déjà.

<div class="i-om-section-content"> 
    <div class="i-om-item one"> 
    </div> 
    <div class="i-om-item two"> 
    </div> 
</div> 

-

.i-om-section-content { 
    max-width: 800px; 
    border: 3px solid blue; 
    margin: 0 auto; 
    padding: 0 32px; 
    padding: 0 3.2rem; 
    position: relative; 
    z-index: 2; 
} 
.i-om-item { 
    overflow: hidden; 
    margin: 10px; 
    position: relative; 
    width: 32.5%; 
    height: 0; 
    padding-bottom: 32.5%; 
    border: 1px solid; 
    float: left; 
    background-size:auto 100%; 
    background-size:center center; 
} 
.one{ 
    background-image:url("http://onetaste.us/wp-content/uploads/2015/10/DSC2641.png"); 
} 
.two{ 
    background-image:url("http://onetaste.us/wp-content/uploads/2015/10/smita.png"); 
} 

https://jsfiddle.net/ammsh4y5/

Answer 2

voir cette mise à jour fiddle.

Il utilise jQuery pour définir la hauteur et la largeur du conteneur comme étant identiques (le rendre carré). Il définit ensuite la hauteur de l'image à la hauteur de la div. Enfin, il centre l'image en obtenant la différence des largeurs de l'image et du div, en la divisant par deux, et en la déplaçant à gauche (positionnement absolu).

est ici le code jQuery (CSS et HTML ont été modifiés ainsi):

function updateImage() { 
    $("img").each(function() { 
     var parent = $(this).parent(); 
     parent.height(parent.width()); 
     $(this).height(parent.height()); 
     $(this).css("left", -($(this).width()-parent.width())/2); 
    }); 
} 

// call on window resize and on load 
$(window).resize(function() { 
    updateImage(); 
}); 
updateImage(); 

Ce n'est pas la solution la plus élégante, mais il fait le travail et est assez intuitive. (Mais j'aime la solution background-image de DylanWatt: beaucoup plus créative).

Answer 3

.i-om-section-content { 
 
    max-width: 800px; 
 
    border: 3px solid blue; 
 
    margin: 0 auto; 
 
    padding: 0 32px; 
 
    padding: 0 3.2rem; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
.i-om-item { 
 
    overflow: hidden; 
 
    margin: 10px; 
 
    position: relative; 
 
    width: 32.5%; 
 
    height: 0; 
 
    padding-bottom: 32.5%; 
 
    border: 1px solid; 
 
    
 
    display:inline-block;  
 
    background-position:center center; 
 
} 
 
.one{ 
 
    background-image:url("http://onetaste.us/wp-content/uploads/2015/10/DSC2641.png"); 
 
} 
 
.two{ 
 
    background-image:url("http://onetaste.us/wp-content/uploads/2015/10/smita.png"); 
 
}

<div class="i-om-section-content"> 
 
    <div class="i-om-item one"> 
 
    </div> 
 
    <div class="i-om-item two"> 
 
    </div> 
 
</div>