【问题标题】:center image in div with overflow hidden隐藏溢出的div中的中心图像
【发布时间】:2012-06-05 12:59:16
【问题描述】:

我有一个 400 像素的图像和一个较小的 div(在我的示例中宽度并不总是 300 像素)。我想把图片在div中居中,如果有溢出就隐藏。

注意:我必须在图像上保留position:absolute。我正在使用 css-transitions,如果我使用 position:relative,我的图像会有点晃动 (https://web.archive.org/web/20120528225923/http://ta6.maxplus.be:8888/)。

jsfiddle http://jsfiddle.net/wjw83/1/

【问题讨论】:

  • 很难理解到底是什么问题以及您要达到什么目标。是that it 吗?
  • bit.ly/MaYbMB 上,如果您将鼠标悬停在“教练”标签上,它会稍微晃动。我想使用 position:absolute 来解决这个问题。问题是溢出:隐藏不会影响具有位置的子元素:绝对。
  • 我在存档链接上看不到任何图像:也许您可以edit 您的问题并完全删除链接。另外,请直接在您的问题中插入小提琴的内容,谢谢。

标签: html css center


【解决方案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/

【讨论】:

  • 这是旧的......伙计,你刚刚节省了数小时的调试时间!真的很感激......
  • 这不适用于不同尺寸的图片
【解决方案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

【讨论】:

  • 感谢您的回复,我已经寻找了几个晚上的方法,您已经解决了!
  • 没问题!它花了很多时间,但它有很多应用程序 - 它几乎是必不可少的。
  • 谢谢!随着时间的推移,我一直在回到这个问题,因为我从来没有对其他解决方案 100% 满意......transform: translate 太挑剔了。我多次尝试使用margin:0 auto,但没有成功。真正的魔法发生在margin:0 -100% 而不是auto 值:)
【解决方案3】:

最新解决方案:

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 编码。恭喜:-)
  • @SamuelRamzan 谢谢!
  • 对于不同尺寸的图片,我不得不通过设置justify-content: stretch;来调整代码,这样图片才能填满容器的宽度。
【解决方案4】:

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

在 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

【讨论】:

    【解决方案5】:

    对我来说,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%;
    }
    

    【讨论】:

      【解决方案6】:
      <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>
      

      【讨论】:

        【解决方案7】:

        只需确保您如何通过 css 背景使用图像使用背景图像位置,如背景:url(您的图像路径)不重复中心中心;它会自动将中心与屏幕对齐。

        【讨论】:

          【解决方案8】:

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

          【讨论】:

            【解决方案9】:

            你必须从侧面合并你的图像以隐藏它试试这个

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

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

            try demo

            我也会读一读

            【讨论】:

              【解决方案10】:

              使用flex-box 为后代提供工作解决方案:

              要点:

              1. 为包装器隐藏溢出
              2. 图片高度和宽度必须指定,不能是百分比。
              3. 使用任何您想要使图像居中的方法。
                wrapper {
                  width: 80;
                  height: 80;
                  overflow: hidden;
                  align-items: center;
                  justify-content: center;
                }
                image {
                  width: min-content;
                  height: min-content;
                }
              

              【讨论】:

                【解决方案11】:

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

                【讨论】:

                  【解决方案12】:

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

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

                  【讨论】:

                    猜你喜欢
                    • 1970-01-01
                    • 2015-11-10
                    • 2017-12-16
                    • 2013-03-17
                    • 1970-01-01
                    • 1970-01-01
                    • 2012-06-28
                    • 1970-01-01
                    • 2023-04-08
                    相关资源
                    最近更新 更多