Question

我有以下元素标记：

<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的身高，我真的不知道为什么，因为我设置了max-height：100％。如果我将容器的最大高度更改为高度，它可以正常工作，但我需要 max-height 。

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

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

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

Answer 1

在你的锚中你指定了max-height和height属性。只需要一个。

Answer 2

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

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

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

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

Answer 3

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

.container 应该有一个固定的宽度，如果它是一个％高度，它应该在一个固定高度的超级容器中，并且锚点的高度可以成功设置为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插件！

Block Anchor包含来自容器div的图像溢出

3 个答案: