center image inside overflow-hidden-parent

Question

Ho un'immagine all'interno di un tag span, la span ha una larghezza e altezza impostate ed è impostata per l'overflow nascosto. quindi rivela solo una piccola parte dell'immagine. Funziona ma la piccola parte dell'immagine che è visibile è l'angolo in alto a sinistra. Mi piacerebbe che fosse il centro dell'immagine che è visibile. Penso di aver bisogno di posizionare l'immagine in modo assoluto, ma la dimensione dell'immagine può variare. Qualcuno sa come fare ciò che sto cercando di fare?

Grazie!

Ecco il codice 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> 

Ecco il 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

Dato questo tipo di HTML:

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

si potrebbe usare i CSS in questo modo:

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 */ 
} 

È quindi possibile centrare l'immagine in base alle sue dimensioni esatte.

In alternativa, se siete in grado di modificare il codice HTML, si può invece usare qualcosa di simile:

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

Poi, abbinare con questo 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 */ 
} 

In questo caso, lo sfondo verrà automaticamente centrato indipendentemente dalle sue dimensioni e sarà ancora cliccabile.

Answer 2

È possibile impostare l'immagine come sfondo dell'elemento e impostare x, asse y come il seguente esempio:

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

Answer 3

Se la larghezza e l'altezza dell'immagine varia, ritengo l'unico modo per fai questo è con javascript.

Stile dell'immagine a sinistra: 50%; superiore: 50%; e poi, usa javascript (event onload immagine forse) per aggiungere margin-left: - imageWidth/2 px; margin-top: - imageightight/2 px;

Quindi sostanzialmente si hanno

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

e il seguente 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. Se stai usando un framework/libreria javascript, il codice potrebbe semplificare un po ', ma non ho fatto questa ipotesi.

Answer 4

Come proposto in https://stackoverflow.com/a/14837947/2227298 da Billy Moat, esiste una soluzione senza conoscere l'altezza e la larghezza dell'immagine.

Provalo qui: 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

questo esempio, le immagini sono al centro dell'elemento, indipendentemente dalle sue dimensioni

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; 
}