image centre à l'intérieur de parenté overflow-caché

Question

J'ai une image à l'intérieur d'une balise span, la plage a une largeur et une hauteur définies, et est définie pour déborder caché. donc il ne révèle qu'une petite partie de l'image. Cela fonctionne mais la petite partie de l'image visible est le coin supérieur gauche. Je voudrais que ce soit le centre de l'image qui soit visible. Je pense que je dois absolument positionner l'image, mais la taille de l'image peut varier. Est-ce que quelqu'un sait comment faire ce que j'essaie de faire?

Merci!

Voici le code HTML:

<div class="lightbox_images"> 
       <h6>Alternate Views</h6> 
       <span> 
        <a href="http://www.kranichs.com/mothers_rings/mothers_rings_txt2.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 1"> 
         <img src="http://www.kranichs.com/mothers_rings/mothers_rings_txt2.jpg" /> 
        </a> 
       </span> 
       <span> 
        <a href="https://www.kranichs.com/product_images/Simon-G@346_M_346_M.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 2"> 
         <img src="https://www.kranichs.com/product_images/Simon-G@346_M_346_M.jpg" /> 
        </a> 
       </span> 
       <span> 
        <a href="http://www.kranichs.com/images/simong/sim_banner_01.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 3"> 
         <img src="http://www.kranichs.com/images/simong/sim_banner_01.jpg" /> 
        </a> 
       </span> 
       <span> 
        <a href="http://www.kranichs.com/images/psu/psu_banner.jpg" rel="lightbox[product_alternate_views]" title="This is my captions 4"> 
         <img src="http://www.kranichs.com/images/psu/psu_banner.jpg" /> 
        </a> 
       </span> 
      </div> 

Voici le CSS:

.lightbox_images{ 
    background-color:#F9F9F9; 
    border:1px solid #F0F0F0; 
} 
.lightbox_images h6{ 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    color:#333333; 
    font-size:14px; 
    font-weight:bold; 
    font-style:italic; 
    text-decoration:none; 
    margin:0px; 
} 
.lightbox_images span{ 
    padding:5px; 
    padding-bottom:15px; 
    background-color:#DFDFDF; 
    margin:5px; 
    display:inline-block; 
    border:1px solid #CCC; 
} 
.lightbox_images a{ 
    display:inline-block; 
    width:60px; 
    height:60px; 
    overflow:hidden; 
    position:relative; 
} 

.lightbox_images a img{ 
    position:absolute; 
    left:-50%; 
    top:-50%; 
} 

.lightbox_images span:hover{ 
    border:1px solid #BBB; 
    background-color:#CFCFCF; 
} 

Answer 1

Compte tenu de cette sorte de HTML:

<span><img src="..." width="..." height="..." alt="..." /></span> 

Vous pouvez utiliser CSS comme ceci:

span { 
    position: relative; 
    display: block; 
    width: 50px; /* Change this */ 
    height: 50px; /* Change this */ 
    overflow: hidden; 
    border: 1px solid #000; 
} 
span img { 
    position: absolute; 
    left: -10px; /* Change this */ 
    top: -10px; /* Change this */ 
} 

Vous pouvez ensuite centrer l'image en fonction de ses dimensions exactes.

Sinon, si vous êtes en mesure de modifier le code HTML, vous pouvez plutôt utiliser quelque chose comme ceci:

<div> 
    <a href="...">[name of picture]</a> 
</div> 

Ensuite, correspondre avec ce CSS:

div { 
    width: 50px; 
    height: 50px; 
    background: transparent url(...) center center no-repeat; 
    border: 1px solid #000; 
} 
div a { 
    display: block; 
    height: 100%; 
    text-indent: -9999em; /* Hides the link text */ 
} 

Dans ce cas, l'arrière-plan sera automatiquement centré indépendamment de ses dimensions, et il sera toujours cliquable.

Answer 2

Vous pouvez définir l'image comme arrière-plan de l'élément et définir les axes x, y comme dans l'exemple suivant:

#mySpan { 
    background-image: url(myimage.png); 
    background-repeat: no-repeat; 
    background-attachment:fixed; 
    background-position: -10 -10 
} 

Answer 3

Si la largeur et la hauteur de l'image varie, je pense que la seule façon de faites ceci avec javascript.

Style de l'image à gauche: 50%; en haut: 50%; puis, utilisez javascript (peut-être l'événement onload image) pour ajouter margin-left: - imageWidth/2 px; margin-top: - imageHauteur/2 px;

Donc, fondamentalement, vous avez

span img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
} 

et les suivantes js

window.onload = function() { 

    var images = document.getElementsByTagName('img'); 

    for(i=0; i<images.length; i++) 
    images[i].onload = centerImage(images[i]); 


    function centerImage(img) { 
    img.style.marginLeft = -(img.width/2) + "px"; 
    img.style.marginTop = -(img.height/2) + "px"; 
    } 

} 

PS. Si vous utilisez un framework/bibliothèque javascript, le code pourrait simplifier un peu, mais je n'ai pas fait cette supposition.

Answer 4

Comme proposé dans https://stackoverflow.com/a/14837947/2227298 par Billy Moat, il existe une solution sans connaître la hauteur et la largeur de l'image.

Essayez ici: http://jsfiddle.net/LSKRy/

<div class="outer"> 
    <div class="inner"> 
    <img src="http://3.bp.blogspot.com/-zvTnqSbUAk8/Tm49IrDAVCI/AAAAAAAACv8/05Ood5LcjkE/s1600/Ferrari-458-Italia-Nighthawk-6.jpg" alt="" /> 
    </div> 
</div> 

.outer { 
    width: 300px; 
    overflow: hidden; 
} 

.inner { 
    display: inline-block; 
    position: relative; 
    right: -50%; 
} 

img { 
    position: relative; 
    left: -50%; 
} 

Answer 5

Cet exemple, les images sont au centre de l'élément, quelle que soit sa taille

HTML:

<div class="box"> 
    <img src="example.jpg"> 
</div> 

CSS :

div.box{ 
    width: 100px; 
    height: 100px 
    overflow: hidden; 
    text-align: center; 
} 

div.box > img{ 
    left: 50%; 
    margin-left: -100%; 
    position: relative; 
    width: auto !important; 
    height: 100px !important; 
}