0

我有以下元素标记：

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

​看这个小提琴（我在那里添加了颜色和不透明度以更好地显示我的问题）

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

PS：我不想隐藏容器的溢出（overflow: hidden），我希望anchor是容器的高度！

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

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

4

3 回答 3

0

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

于 2012-12-04T11:38:05.487 回答
0

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

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

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

.container { max-width: 150px; max-height: 150px; background: red; overflow: hidden }
于 2012-12-04T12:25:53.180 回答
0

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

.container应该有一个固定的宽度，或者如果它是一个 % 高度，它应该在一个具有固定高度的超级容器内，并且可以成功地将anchor的高度设置为 100%。

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

这是HTML：

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

​</p>

这是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 插件！

于 2012-12-04T14:19:46.847 回答