正文

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

 2023-03-29  191

关键词：

【中文标题】隐藏溢出的div中的中心图像【英文标题】：center image in div with overflow hidden 【发布时间】：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 您的问题并完全删除链接。另外，请直接在您的问题中插入小提琴的内容，谢谢。 【参考方案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"  />
</div>
<br />
<img src="http://via.placeholder.com/400x200/A44/EED?text=Hello"  />

如果您愿意，您还可以通过添加负边距和顶部位置来垂直居中图像：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"  />
</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 为后代提供工作解决方案：

要点：

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

  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;

【讨论】：

Flutter：堆栈中的中心溢出图像

】Flutter：堆栈中的中心溢出图像【英文标题】：Flutter:centeroverflowedimageinStack【发布时间】：2021-03-1105:07:12【问题描述】：我有一张图片，我想将它放在尺寸小于初始图片的Stack小部件中。我还需要将此图像居中放置在较小的小部... 查看详情

隐藏溢出的响应式垂直中心

】隐藏溢出的响应式垂直中心【英文标题】：Responsiveverticalcenterwithoverflowhidden【发布时间】：2013-12-0703:45:19【问题描述】：在搜索StackOverflow和Google之后，我仍然想知道如何垂直居中大于父元素的图像。我不使用高度，只使用最... 查看详情

div中的中心图像

】div中的中心图像【英文标题】：centerimageinadiv【发布时间】：2016-01-0521:04:02【问题描述】：我正在尝试将div中的图像水平居中，但我不明白为什么它不起作用...我已经将图像居中很多次，但这次我只是不明白。..这是我尝试过... 查看详情

具有绝对位置的div中的水平中心动态图像

】具有绝对位置的div中的水平中心动态图像【英文标题】：Horizontalcenterdynamicimageindivwithabsoluteposition【发布时间】：2013-07-1112:55:03【问题描述】：我已经在整个网络上寻找这个答案，但在我看来，为了在div中以绝对位置水平居中... 查看详情

如何对齐图像中心的文本

...布时间】：2020-01-1016:33:04【问题描述】：我正在尝试将div中的文本居中，这个div包含一个图像+另一个div，其中包含需要居中的文本。见下图https://ibb.co/XF7t0GG我面临的问题是，也位于div中的图像不允许我在中心勾勒出文本。我尝... 查看详情

中心 div 左右溢出

】中心div左右溢出【英文标题】：Centerdivwithoverflowleftandright【发布时间】：2016-06-1521:46:54【问题描述】：这看起来是一个非常简单的问题，但我找不到答案：我想将一个固定宽度为500像素的div居中。标记和样式如下：<div>Lore... 查看详情

图像的中心始终位于 div 的中心 [重复]

...图创建一个carousel来复制https://www.fcbarcelona.com/en/Barca网站中的那个。尽管我的div大小会波动，但如何使background-image在我的div中居中，这很容易，尽管我无法理查看详情

位置绝对和溢出隐藏

】位置绝对和溢出隐藏【英文标题】：Positionabsoluteandoverflowhidden【发布时间】：2011-06-0402:12:34【问题描述】：我们有两个DIV，一个嵌入另一个。如果外层DIV不是绝对定位，则内层DIV是绝对定位，不服从外层DIV的溢出隐藏(example)。... 查看详情

如何左对齐和垂直对齐标题中的图像并将文本水平保持在div的中心[重复]

】如何左对齐和垂直对齐标题中的图像并将文本水平保持在div的中心[重复]【英文标题】：Howtoleftalignandverticallyalignaimageinaheaderandkeeptextincenterofdivhorizontally[duplicate]【发布时间】：2020-02-2507:58:39【问题描述】：我正在寻求帮助，在... 查看详情

csstalbe中td溢出隐藏div溢出隐藏

td溢出隐藏1table{2width:100px;3table-layout:fixed;/*只有定义了表格的布局算法为fixed，下面td的定义才能起作用。*/4}5td{6width:100%;7word-break:keep-all;/*不换行*/8white-space:nowrap;/*不换行*/9overflow:hidden;/*内容超出宽度时隐藏超出部分的内容*/10text... 查看详情

DIV 背景图像溢出

】DIV背景图像溢出【英文标题】：DIVbackground-imageoverflow【发布时间】：2011-07-2815:48:47【问题描述】：我有一个带有背景图像的DIV元素，我希望它溢出到DIV的尺寸之外（现在它会切断图像，因为图像比DIV大）。这可能吗？overflow:vis... 查看详情

如何获得溢出的真实 .height()：隐藏或溢出：滚动 div？

】如何获得溢出的真实.height()：隐藏或溢出：滚动div？【英文标题】：HowdoIgetthereal.height()ofaoverflow:hiddenoroverflow:scrolldiv?【发布时间】：2011-02-0103:06:01【问题描述】：我有一个关于如何获得div高度的问题。我知道.height()和innerHeight... 查看详情

如何使包含 div 溢出隐藏在包含 div 的内部

】如何使包含div溢出隐藏在包含div的内部【英文标题】：HowdoImakeacontainingdivoverflowhiddeninsideit\'scontainingdiv【发布时间】：2022-01-2405:08:16【问题描述】：我正在尝试为这个简单的计算器应用程序提供“光亮”，就像您在灯光下在手... 查看详情

使用溢出时如何移动图像的 POV：隐藏？

】使用溢出时如何移动图像的POV：隐藏？【英文标题】：HowtomovethePOVofanimagewhenusingoverflow:hidden?【发布时间】：2016-08-0818:33:37【问题描述】：所以经过长时间的搜索，我终于找到了如何使用overflow:hidden;在不扭曲/压缩图像的情况下... 查看详情

轮播无法将图像 div 移到中心

...能的div上，但仍然无法使其居中）：这里是我的django模板中的html，所以忽略%%它查看详情

尝试将拖动边界添加到溢出时隐藏的图像

】尝试将拖动边界添加到溢出时隐藏的图像【英文标题】：Tryingtoadddraggingboundarytoanimagehiddenonoverflow【发布时间】：2018-09-2219:54:15【问题描述】：我正在尝试向此代码添加边界，我可以在其中拖动图像以查看隐藏的部分，而无需... 查看详情

根据图像是不是存在隐藏 TPL 文件中的 DIV？

】根据图像是不是存在隐藏TPL文件中的DIV？【英文标题】：HidingDIVinTPLfilebasedonifanimageexists?根据图像是否存在隐藏TPL文件中的DIV？【发布时间】：2013-03-0504:52:07【问题描述】：<div><divstyle="margin-left:67px"><tablestyle="border:1... 查看详情

jQuery：悬停时显示和隐藏子div

】jQuery：悬停时显示和隐藏子div【英文标题】：jQuery:Showandhidechilddivwhenhovering【发布时间】：2011-02-0806:43:56【问题描述】：我有一套物品。每个项目都有两个图像和一些文本。对于图像，我创建了一个父div，它有一个溢出：隐藏... 查看详情