溢出：隐藏不适用于图像

Posted 2023-03-05

【中文标题】溢出：隐藏不适用于图像

【英文标题】：Overflow: hidden is not working with images

【发布时间】：2013-12-16 04:45:22

【问题描述】：

我有这个 CSS 代码：

#portrait
  height: 300px;
  width: 550px;
  border: solid;
  margin-right: auto;
  margin-left: auto;
  word-wrap:break-word;
  overflow:hidden;

.image
  float:left;
  height: 30%;
  border:solid 1px;
  padding: 1px;
  posit ion:relative;

和html：

<div id="portrait">
<img class="image" src="http://media.indiatimes.in/media/photogallery/2012/Dec/best_images_of_2012_1355117665_1355117684.jpg"/>
<!--Can't pull all images in here because it thinks my question is spam-->
<img class="image" src="http://adrao.com.sapo.pt/soajo_sol.jpg"/>
<img class="image" src="http://www.befrielsen1945.dk/temaer/internationalt/krigensgang/kilder/ofre.jpg"/>
<img class="image" src="http://ionenewsone.files.wordpress.com/2009/08/oj-simpson-smiling-murder-trial.jpg"/>
<img class="image" src="http://images.nymag.com/images/2/daily/2009/10/20091006_gossipgirl_560x375.jpg"/> 
<img class="image" src="http://images.nymag.com/images/2/daily/2009/10/20091006_gossipgirl_560x375.jpg"/>
</div>

我想要做的是隐藏 x 轴中的图像溢出（而不是第一个金发女郎在第二行，我希望她在必要时被裁剪但仍保留在第一行等等）。当我做overflow-x hidden时它不会工作。对这个有什么想法吗？

【问题讨论】：

看看This Question它可能对你有帮助，你需要让你的图像在一个包含的div中彼此相邻浮动 - 这是小提琴示例http://jsfiddle.net/2s95M

jsfiddle.net/j4Ad7

Musa，除了“float:left”还有其他方法吗？ Ty 为你回答 Wezly，但这正是我正在寻找的 Musa 所写的内容。

【参考方案1】：

应用溢出：隐藏；容器而不是图像的属性。它会解决你的问题！

【参考方案2】：

当我使用溢出隐藏时，我的视频消失了。原来我需要设置容器的宽度，而不仅仅是高度。 而且我不必在容器上使用任何定位。

【参考方案3】：

既然#portrait 不允许溢出图像，那么 您需要一个额外的容器，该容器具有指定的宽度，可以将这些图像保存在里面。 这样做：

<div id="portrait">
    <div id="wrapper">
        your images
...

然后申请

#wrapper
    height:30%;
    overflow:hidden;
    width: 1000px; /* it is only important to be bigger then parent for one image width size */


.image
  height: 100%;

【讨论】：

因为您希望图像浮动，但不进入另一行，您需要一些东西将它们固定在一起，这将是#wrapper，而且#wrapper 会比纵向更大，所以溢出：从#portrait 中隐藏将按照您需要的方式很好地切割它

很棒的答案。你说#portrait is not allowed to overflow the images，请问“不允许”是什么意思？

@Webwoman 我只是说默认情况下它不会允许图像溢出含义流到其边界之外。它会将它们分成新的行

谢谢！谢谢！谢谢！谢谢！我已经让我的容器 100% 制作了动画，并且没有显示的图像使它成为 XXXpx 和繁荣！