溢出隐藏的父级中心图像

我在span标签内有一个图像,span有一个设置的宽度和高度,并设置为隐藏溢出.所以它只显示了一小部分图像.这可以工作,但可见的图像的一小部分是左上角.我希望它是可见的图像的中心.我想我需要绝对定位图像,但图像的大小可能会有所不同.有谁知道怎么做我想做的事情？

谢谢!

这是HTML:

                
Alternate Views
                
                    
                        
                    
                
                
                    
                        
                    
                
                
                    
                        
                    
                
                
                    
                        
                    
                
            

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

KrisWebDev.. 28

正如Billy Moat 在/sf/ask/17360801/中提出的那样,有一种解决方案,但不知道图像的高度和宽度.

在这里试试:http://jsfiddle.net/LSKRy/

    

    
    


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

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

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

---

Ron DeVera.. 17

鉴于这种HTML:

您可以像这样使用CSS:

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

然后,您可以根据图像的确切尺寸使图像居中.

或者,如果您能够修改HTML,则可以改为使用以下内容:

  [name of picture]

然后,将它与此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 */
}

在这种情况下,背景将自动居中,无论其尺寸如何,它仍然是可点击的.

1> KrisWebDev..：

---

正如Billy Moat 在/sf/ask/17360801/中提出的那样,有一种解决方案,但不知道图像的高度和宽度.

在这里试试:http://jsfiddle.net/LSKRy/

    

    
    


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

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

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

2> Ron DeVera..：

---

鉴于这种HTML:

您可以像这样使用CSS:

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

然后,您可以根据图像的确切尺寸使图像居中.

或者,如果您能够修改HTML,则可以改为使用以下内容:

  [name of picture]

然后,将它与此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 */
}

在这种情况下,背景将自动居中,无论其尺寸如何,它仍然是可点击的.

---

谢谢,但图像大小可以.我尝试使用-50%,但这只是容器宽度的-50%,而不是图像宽度.