У меня есть изображение внутри тега span, span имеет заданную ширину и высоту, и он настроен на скрытие переполнения. поэтому он отображает только небольшую часть изображения. Это работает, но небольшая часть видимого изображения - верхний левый угол. Я бы хотел, чтобы это был центр изображения, который виден. Я думаю, мне нужно полностью позиционировать изображение, но размер изображения может измениться. Кто-нибудь знает, как делать то, что я пытаюсь сделать?
Спасибо!
Вот HTML:
<div class="lightbox_images">
<h6>Alternate Views</h6>
<span>
<a href="#" onclick="location.href='http://www.kranichs.com/mothers_rings/mothers_rings_txt2.jpg'; return false;" 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="#" onclick="location.href='https://www.kranichs.com/product_images/
Вот 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;
}