溢出隐藏的父级中心图像

时间:2009-03-27 14:29:41

标签: css

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

谢谢!

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

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

5 个答案:

答案 0 :(得分:28)

正如Billy Moat在https://stackoverflow.com/a/14837947/2227298中所提出的,有一个解决方案,但不知道图像的高度和宽度。

在此处试试: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%;
}

答案 1 :(得分:17)

鉴于此类HTML:

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

您可以使用这样的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,则可以使用以下内容:

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

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

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

答案 2 :(得分:4)

此示例中,图片位于元素的中心,无论其大小如何

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

答案 3 :(得分:3)

如果图像的宽度和高度不同,我认为唯一的方法是使用javascript。

将图像调整为左:50%;顶部:50%;然后,使用javascript(图像onload事件可能)添加margin-left: - imageWidth / 2 px; margin-top: - imageHeight / 2 px;

所以基本上你有

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

以及以下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。如果您正在使用javascript框架/库,代码可以简化一点,但我没有做出这样的假设。

答案 4 :(得分:0)

您可以将图像设置为元素的背景,并设置x,y轴,如下例所示:

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