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

Question

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

HTML

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

<a> 的高度元素使用相对于 body 高度的百分比设置。里面的图像应该总是有 <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 标签。为您的内容创建一个单独的部分。然后，您可以尽可能多地自定义所有内容。