css – 中心图像在overflow-hidden-parent内

我有一个跨度标签中的图像，跨度有一个设置的宽度和高度，并设置为溢出隐藏。所以它只显示图像的一小部分。这是有效的，但可见的图像的一小部分是左上角。我希望它是可见的图像的中心。我想我需要绝对定位图像，但图像的大小可能会有所不同。有谁知道如何做我想做的事情？

谢谢！

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

解决方法

给定这种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 */
}

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

原文地址：https://www.jb51.cc/css/219972.html