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='...' alt='...' /></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.