CSS 溢出隐藏父项内的中心图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/689991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
center image inside overflow-hidden-parent
提问by JD Isaacks
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?
我在 span 标签中有一个图像，span 有一个设置的宽度和高度，并设置为溢出隐藏。所以它只显示图像的一小部分。这有效，但可见图像的一小部分是左上角。我希望它成为可见图像的中心。我想我需要绝对定位图像，但图像的大小可能会有所不同。有谁知道如何做我想做的事？
Thanks!
谢谢！
Here is the HTML:
这是 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:
这是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;
}
采纳答案by Ron DeVera
Given this sort of HTML:
鉴于这种 HTML：
<span><img src="..." width="..." height="..." alt="..." /></span>
You could use CSS like this:
你可以像这样使用 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 */
}
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:
或者，如果您能够修改 HTML，则可以改为使用以下内容：
<div>
<a href="...">[name of picture]</a>
</div>
Then, match it with this CSS:
然后，将其与此 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.
在这种情况下，无论其尺寸如何，背景都会自动居中，并且仍然可以点击。
回答by KrisWebDev
As proposed in https://stackoverflow.com/a/14837947/2227298by Billy Moat, there is a solution without knowing the image height and width.
正如Billy Moat在https://stackoverflow.com/a/14837947/2227298 中提出的，有一个不知道图像高度和宽度的解决方案。
Try it here: http://jsfiddle.net/LSKRy/
在这里试试：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%;
}
回答by Vitor Deco
This example, the images are at the center of the element, regardless of its size
这个例子中，图像位于元素的中心，无论其大小
HTML:
HTML：
<div class="box">
<img src="example.jpg">
</div>
CSS:
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;
}
回答by andi
If the width and height of the image varies, I think the only way to do this is with javascript.
如果图像的宽度和高度不同，我认为唯一的方法是使用 javascript。
Style the image to left:50%; top:50%; and then, use javascript (image onload event maybe) to add margin-left:-imageWidth/2 px; margin-top:-imageHeight/2 px;
将图像设置为左侧：50%；顶部：50%；然后，使用 javascript（可能是图像加载事件）添加 margin-left:- imageWidth/2 px; margin-top:- imageHeight/2 px;
So basically you have
所以基本上你有
span img {
position: absolute;
left: 50%;
top: 50%;
}
and the following js
和以下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. If you're using a javascript framework/library the code could simplify a bit, but I didn't make that assumption.
附注。如果您使用的是 javascript 框架/库，代码可以简化一些，但我没有做出这样的假设。
回答by Miquel
You can set the image as the background of the element and set x,y axis as in the following example:
您可以将图像设置为元素的背景并设置 x,y 轴，如下例所示：
#mySpan {
background-image: url(myimage.png);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: -10 -10
}
