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

我希望这个只能用CSS解决。我有一个这样的元素：如何强制父元素保持其内容大小调整大小

HTML

<a href="" title=""> 
    <img src="" alt=""/> 
</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>-元件保持其初始宽度。这意味着，边距变得无用，元素开始重叠或漂移。

的影响

你可以看到这个图像的效果：

enter image description here

演示

任务离子

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

它不会正确缩放图像，因为图像调整大小不正确而不会显示为红色 – Huangism

@ insertusername这里看看这个小提琴http://jsfiddle.net/Rjk8U/3/。你在找什么？ – dowomenfart

是否有一个特定的原因，您为什么需要它根据高度而不是宽度来调整大小？ – Huangism

使用div标签。为您的内容创建一个单独的部门。然后，您可以尽可能多地自定义所有的东西。

2013-10-29 18:21:48

你能举一个它如何工作的例子吗？ – Huangism

我解决它暂时是这样的：

CSS

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

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

演示

2013-10-29 18:38:54 insertusernamehere

如果有人有另一个或更好的想法，我将不胜感激。 – insertusernamehere

是的，这工作没有js – Huangism

您可以用jQuery做

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

我锚的宽度正好设置为相同图像的宽度。我无法弄清楚如何只用CSS

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

2013-10-29 18:39:48 Huangism

回答