Question

我有一个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/

Answer 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/

Answer 2

上述解决方案都不适合我。我需要动态图像大小以适合具有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%;
}

这里的工作示例： http://codepen.io/simgooder/pen/yNmXer

Answer 3

通过MELISSA PENTA发现这个很好的solution

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

Answer 4

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

Answer 5

你必须将你的图像从侧面隐藏起来以隐藏它试试这个

3 Easy and Fast CSS Techniques for Faux Image Cropping | Css ...

上面网站上第一种方式的演示之一

try demo

我也会对它做一些阅读

Answer 6

只需确保你如何使用图像通过css背景使用背景图像位置，如背景：url（你的图像路径）无重复中心;它会自动将中心对准屏幕。

Answer 7

这似乎适用于我们的网站，使用您的想法和基于包装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>

Answer 8

使用flex-box解决后代问题的解决方案：

要点：

为包装器隐藏了溢出
必须指定图像的高度和宽度，不能为百分比。
使用任何要使图像居中的方法。

  wrapper {
    width: 80;
    height: 80;
    overflow: hidden;
    align-items: center;
    justify-content: center;
  }
  image {
    width: min-content;
    height: min-content;
  }

Answer 9

我一直在尝试在我最近的网站的this page内实现Jaap的答案，但有一点不同：.main {height：}设置为auto而不是固定的px值。作为响应式开发人员，我正在寻找一种解决方案，使图像高度与左浮动文本元素同步，但仅在我的文本高度大于我的实际图像高度的情况下。在这种情况下，图像不应该重新缩放，而是按照上面原始问题中的描述进行裁剪和居中。可以这样做吗？您可以通过慢慢缩小浏览器的宽度来模拟行为。

Answer 10

这个问题是一个巨大的痛苦......但我终于明白了。我见过很多复杂的解决方案。现在这很简单，我看到了。

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

Answer 11

div中的中心图像，隐藏溢出

12 个答案: