comment centrer img verticalement et horizontalement dans un conteneur - img peut être potentiellement plus grand que le conteneur

Question

J'ai un conteneur qui contiendra une image, et cette image est chargée à partir d'une application et donc les dimensions du conteneur sont connues pendant que le l'image va varier.

J'ai actuellement les éléments essentiels suivants:

#secondary_photos { 
    height: 100px; 
    width: 300px; 
    overflow: hidden; 
} 

#secondary_photos .small_photo { 
    float:left; 
    height: 100px; 
    width: 300px; 
} 

#secondary_photos .small_photo img{ 
    height: 100%; 
    width: auto; 
    position: absolute; 
    bottom: 0px 
} 

#secondary_photos .small_photo img{ 
    height: auto; 
    width: 100%; 
    position: absolute; 
    bottom: 0px 
} 

Cela fonctionne « ok » me former: il charge l'image, redimensionne pour prendre 100% de la largeur du conteneur et il positionne de telle sorte que l'ascendante la moitié de l'image est affichée dans le conteneur - donc si l'image finit par être 200px haute après avoir redimensionné la largeur à 300px, seulement les 100px inférieurs de l'image sont affichés (un réglage arbitraire).

Ce que je suis en train de faire est d'afficher toujours au milieu de l'image - donc dans l'exemple ci-dessus, l'image afficherait pixels 50-150 (à partir du haut) ..

Answer 1

Comme il ressemble vous ne connaissez pas la taille de l'image au chargement de la page, vous pouvez utiliser une combinaison de dead centre et de javascript pour faire ce que vous voulez. Le flux serait le suivant:

1. Configuration du balisage comme dans l'exemple du point mort.
2. Lorsque l'image est chargée, obtenez sa largeur et sa hauteur.
3. Définissez la marge de l'image à gauche sur (image width/2 * -1).
4. Définissez le haut de l'image sur (image height/2 * -1).

Comme vous pouvez aussi avoir des images plus grandes que votre conteneur, vous pouvez ajouter un chèque conditionnel à cela:

// Get DOM elements 
var container = document.getElementById('container'); 
var image = document.getElementById('img'); 

// Check they're good 
if(container && img){ 
    var height = image.height; 
    var width = image.width; 

    // Horizontally centre if container is wider than image 
    if(container.offsetWidth > width){ 
    image.style.marginLeft = Math.floor((width/2 * -1)) + "px"; 
    } 

    // Vertically centre if container is taller than image 
    if(container.offsetHeight > height){ 
    image.style.top = Math.floor((height/2 * -1)) + "px"; 
    } 
}