center image inside overflow-hidden-parent

Question

I have an image inside a span tag, the span has a set width and height, and is set to overflow hidden. so it only reveals a small portion of the image. This works but the small portion of the image that is visible is the top left corner. I would like it to be the center of the image that is visible. I think I need to absolutely position the image, but the size of the image can vary though. Does anyone know how to do what I am trying to do?

Thanks!

Here is the 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>

Here is the 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

Given this sort of HTML:

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

You could use CSS like this:

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

You can then center the image based on its exact dimensions.

Alternatively, if you're able to modify the HTML, you could instead use something like this:

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

Then, match it with this 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 this case, the background will be automatically centered regardless of its dimensions, and it'll still be clickable.

Answer 2

You can set the image as the background of the element and set x,y axis as in the following example:

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

Answer 3

If the width and height of the image varies, I think the only way to do this is with javascript.

Style the image to left:50%; top:50%; and then, use javascript (image onload event maybe) to add margin-left:-imageWidth/2 px; margin-top:-imageHeight/2 px;

So basically you have

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

and the following 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. If you're using a javascript framework/library the code could simplify a bit, but I didn't make that assumption.