如何强制父元素在调整大小时保持其内容的大小

Question

我希望这个只能用CSS解决。我有这样一个元素：

HTML

<a href="" title="">
    <img src="" alt=""/>
</a>

使用相对于身体高度的百分比设置<a>元素的高度。内部图像应始终具有<a>元素高度的100％。这适用于CSS，如：

CSS

a {
    display: inline-block;
    height: 20%;
    margin: 0 5% 0 0;
    text-align: center;
}

a > img {
    height: 100%;
}

我现在面临的问题如下：调整窗口大小时，图像会正确缩放，因为<a> - 元素会获得正确的新高度。不幸的是，<a> - 元素保持其初始宽度。这意味着，边距变得无用，元素开始重叠或分开。

效果

您可以在此图片中看到效果：

演示

You can try it yourself

问题

有什么办法可以解决这个问题，即父元素总是有内容的宽度？当我在调整大小后重新加载具有新高度的页面时，显然一切都再次适合。

Answer 1

使用div标签。 创建单独的内容分部。 然后你可以尽可能地自定义所有的东西。

Answer 2

我暂时解决了这个问题：

<强> CSS

a {
    margin: 0 1% 0 0;
    background: red;
    text-align: center;
}

a > img {
    position: relative;
    height: 20%;
}

<强>演示

Try it yourself

Answer 3

你可以用jquery

来做

http://jsfiddle.net/Rjk8U/4/

$(window).on('resize', function() {
    $('a').css('width', $('img').width());
});

我只是将锚点的宽度设置为与图像的宽度相同。我无法弄清楚如何只使用CSS

注意：我知道您希望页面高度为100％，但我所假设的块位于页面内，那么为什么它们不能基于宽度百分比呢？如果您以高度为基础，那么当您只更改页面宽度时，图像不会调整大小