logo标签列表

在具有溢出隐藏的div中居中图像

htmlcsscenter
43
很难理解问题的确切所在以及您想要实现什么。这是您想要实现的吗？（http://jsfiddle.net/teneff/wjw83/3/）？ - Teneff
在http://bit.ly/MaYbMB上，如果你将鼠标悬停在“coaching”选项卡上，它会抖动。我想使用position:absolute来解决这个问题。但问题是overflow:hidden不会影响position:absolute的子元素。 - Puyol
我在存档链接中没有看到任何图像：也许你可以[编辑]你的问题并完全删除链接。此外，请直接在你的问题中插入小提琴的内容，谢谢。 - Cœur
12个回答
37

你应该将容器设置为相对定位，并给它一个高度，这样就完成了。

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/
这太棒了！老兄，你刚刚省下了好几个小时的调试时间！真的很感激。 - Rodrigo Zuluaga
1
这对于具有不同尺寸的图像是行不通的。 - Andy
我用于gif。谢谢。:) 如果你想让照片充满整个屏幕，请使用以下宽度：100％，高度：100％。 - Berkay Nayman
27

以上解决方案都不适用于我。 我需要一个动态图像大小，以适应具有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

1
谢谢您的回复，我已经搜索了几个晚上的方法来解决这个问题，而您已经解决了它！ - jaseeey
没问题！虽然折腾了很久，但它有很多应用 - 几乎是不可或缺的。 - Simon G
1
谢谢！我一直在回来解决这个问题，因为我从来没有对其他解决方案100%满意... transform: translate 太麻烦了。我尝试过很多次使用 margin:0 auto，但都不起作用。真正的魔法是使用 margin:0 -100% 而不是 auto 值 :) - aequalsb
26

最新的解决方案：

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 */
}
很好的建议，简单、清晰、有效。这是优秀的CSS编码。恭喜 :-) - Samuel Ramzan
1
@SamuelRamzan 谢谢！ - GilCarvalhoDev
对于不同尺寸的图像，我必须通过设置 justify-content: stretch; 来调整代码，以便图像填充容器的宽度。 - n_moen
很棒的解决方案！我能够利用 aspect-ratio: 1 / 1; 只在父元素上指定一个固定宽度。如果你有动态组件，这个方法非常有用。 - Josh Frankel
7

我发现了MELISSA PENTA的一个好的解决方案(https://www.localwisdom.com/)

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%;
}
居中任意大小图片
使用圆形包装器和不同大小的图片。
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

。

6

对我来说，使用 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%;
}
3

以下是与flex-box相关的实用解决方案:

主要要点:

  1. 包装器使用overflow hidden
  2. 必须指定图像的高度和宽度，不能是百分比。
  3. 使用任何你想用来居中图像的方法。
  wrapper {
    width: 80;
    height: 80;
    overflow: hidden;
    align-items: center;
    justify-content: center;
  }
  image {
    width: min-content;
    height: min-content;
  }
2
<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>

1

请确保您是如何通过CSS背景使用图像的，使用背景图像位置，例如background: url(您的图像路径) no-repeat center center; 它会自动将其居中对齐到屏幕。

1
这似乎在我们的网站上起作用了，使用您的想法和基于包装器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>
0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接