包含图像的块锚点从容器 div 溢出答案

【问题标题】：Block Anchor containing Image overflows from container div包含图像的块锚点从容器 div 溢出
【发布时间】：2012-12-04 11:30:41
【问题描述】：

我有以下元素标记：

<div class="container">
    <a href="#">
        <img src="http://placehold.it/250x500" alt="img" />
    </a>
</div>

使用这个 CSS：

.container { max-width: 150px; max-height: 150px; }
.container a { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; }

请参阅this fiddle（我在其中添加了颜色和不透明度以更好地显示我的问题）

问题是虽然锚适合他父母的宽度（最大宽度：100％;）它不适合他父母的身高，但它适合他的孩子img的高度，我真的不知道为什么，因为我设置了最大高度：100%。如果我将容器的 max-height 更改为 height 它可以工作，但我需要它是 max-height。

PS：我不想隐藏容器的溢出（溢出：隐藏），我希望锚点是容器的高度！

PPS：问题不在于锚点，我作为 img 的父项放入容器中的每个项目都将适合 img 的高度，除非我给出 固定高度到容器或 img 的父亲（在我的情况下是锚），但我不想这样做，因为我需要它是流动的。

PPPS：我部分回答了这个问题：我可以将锚的最大高度设置为继承，就像在 this example 中一样，但这不适用于容器的最大高度百分比，它不幸的是，这是我需要的。

【问题讨论】：

标签： html css layout styles

【解决方案1】：

在您的锚点中，您指定了 max-height 和 height 属性。只需要其中一个。

【讨论】：

是的，我知道，我只是表明我已经尝试了一切：p 编辑 JSfiddle 仅宽度：100%;和高度：100%；这仍然不能解决问题。

【解决方案2】：

我认为您正试图在容器内隐藏额外可见的图像......所以，

尝试溢出：隐藏在容器 div 中。

http://jsfiddle.net/E6aqZ/2/

.container { max-width: 150px; max-height: 150px; background: red; overflow: hidden }

【讨论】：

不，我不想隐藏溢出，我希望锚点与其容器的大小完全相同，图像可以保持不变！如果我想隐藏溢出，我会这么说：p

【解决方案3】：

好的，这就是答案（我的一位同事帮我解决了这个问题）：

.container 应该有一个固定的宽度，或者如果它是一个 % 高度，它应该在一个具有固定高度的 supercontainer 和 anchor的高度可以成功设置为100%。

就是这样！感谢所有做出贡献的人。 Here's a jsFiddle 的结果。

这是 HTML：

<div class="superContainer">
    <div class="container">
        <a href="#">
            <img src="http://placehold.it/250x500" alt="img" />
        </a>
    </div>
</div>

这是 CSS：

.superContainer { height: 200px; }
.container { width: 30%; height: 50%; background: red; font-size: 0; }
.container a { display: block; width: 100%; height: 100%; background: orange; opacity: 0.7; }
.container a img { opacity: 0.7; }

很抱歉，如果答案不符合您的需求，但我需要一个非常具体的案例。我最终会使用这种方法上传我的 jQuery 插件！

【讨论】：