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

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>-element 会获得正确的新高度。不幸的是，<a>-element保持其初始宽度。这意味着，边距变得无用，元素开始重叠或分开。

效果

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

在此处输入图像描述

演示

问题

有什么办法可以让父元素始终具有其内容的宽度？当我在调整大小后重新加载具有新高度的页面时，显然一切都重新适合了。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

我暂时这样解决了：

CSS

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

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

演示

score 0 · Accepted Answer

你可以用jquery来做

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

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

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

3 回答 3