我有一个400px的图像和一个较小的div（宽度并不总是300px，如我的例子）。我想将图像居中在div中，如果有溢出，则隐藏它。
注意：我必须在图像上保留position:absolute。我正在使用css-transitions，如果我使用position:relative，我的图像会震动一点（https://web.archive.org/web/20120528225923/http://ta6.maxplus.be:8888/）。
的jsfiddle http://jsfiddle.net/wjw83/1/
你应该让容器相对并给它一个高度，你就完成了。
http://jsfiddle.net/jaap/wjw83/4/
.main {
width: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 200px;
}
img.absolute {
left: 50%;
margin-left: -200px;
position: absolute;
}<div class="main">
<img class="absolute" src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
</div>
<br />
<img src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />如果您愿意，还可以通过添加负边距和顶部位置来垂直居中图像：http://jsfiddle.net/jaap/wjw83/5/
最新解决方案：
HTML
<div class="parent">
<img src="image.jpg" height="600" width="600"/>
</div>
CSS
.parent {
width: 200px;
height: 200px;
overflow: hidden;
/* Magic */
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
}
对我来说，flex-box非常适合将图像居中。
这是我的html代码：
<div class="img-wrapper">
<img src="..." >
</div>
这我用于css：我想要的图像与包装元素一样宽，但如果高度大于包装元素的高度，它应该被“裁剪”/不显示。
.img-wrapper{
width: 100%;
height: 50%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img {
height: auto;
width: 100%;
}
以上解决方案都不适合我。我需要一个动态图像大小，以适应与overflow:hidden的圆形父容器
.circle-container {
width:100px;
height:100px;
text-align:center;
border-radius:50%;
overflow:hidden;
}
.circle-img img {
min-width:100px;
max-width:none;
height:100px;
margin:0 -100%;
}
发现这个很好的solution由MELISSA PENTA
HTML
<div class="wrapper">
<img src="image.jpg" />
</div>
CSS
div.wrapper {
height:200px;
line-height:200px;
overflow:hidden;
text-align:center;
width:200px;
}
div.wrapper img {
margin:-100%;
}
以div为中心任意大小的图像 与圆形包装和不同大小的图像一起使用。
CSS
.item-image {
border: 5px solid #ccc;
border-radius: 100%;
margin: 0 auto;
height: 200px;
width: 200px;
overflow: hidden;
text-align: center;
}
.item-image img {
height: 200px;
margin: -100%;
max-width: none;
width: auto;
}
这里的工作示例codepen
<html>
<head>
<style type="text/css">
.div-main{
height:200px;
width:200px;
overflow: hidden;
background:url(img.jpg) no-repeat center center
}
</style>
</head>
<body>
<div class="div-main">
</div>
</body>
只需确保你如何使用图像通过CSS背景使用背景图像位置像背景：url（你的图像路径）无重复中心;它会自动将中心对准屏幕。
这似乎适用于我们的网站，使用您的想法和基于包装div的左边缘的一点数学。向左走50％然后拿出50％的额外余量似乎是多余的，但似乎有效。
div.ImgWrapper {
width: 160px;
height: 160px
overflow: hidden;
text-align: center;
}
img.CropCenter {
left: 50%;
margin-left: -100%;
position: relative;
width: auto !important;
height: 160px !important;
}
<div class="ImgWrapper">
<a href="#"><img class="CropCenter" src="img.png"></a>
</div>
你必须从侧面裁剪你的图像以隐藏它试试这个
3 Easy and Fast CSS Techniques for Faux Image Cropping | Css ...
上面网站上第一种方式的演示之一
我也会对它做一些阅读
我一直在尝试在我最近的网站的this page中实现Jaap的答案，但有一点不同：.main {height：}设置为auto而不是固定的px值。作为响应式开发人员，我正在寻找一种解决方案，使图像高度与左浮动文本元素同步，但仅在我的文本高度大于我的实际图像高度的情况下。在这种情况下，图像不应该重新缩放，而是按照上面原始问题中的描述进行裁剪和居中。可以这样做吗？您可以通过慢慢缩小浏览器的宽度来模拟行为。
这个问题是一个巨大的痛苦......但我终于明白了。我见过很多复杂的解决方案。现在这很简单，我看到了。
.parent {
width:70px;
height:70px;
}
.child {
height:100%;
width:10000px; /* Or some other impossibly large number */
margin-left: -4965px; /* -1*((child width-parent width)/2) */
}
.child img {
display:block; /* won't work without this */
height:100%;
margin:0 auto;
}