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

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

HTML

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

我现在面临的问题是：当调整窗口大小时，图像会正确缩放，如

问题

有什么方法可以解决这个问题，让父元素始终保持其内容的宽度？当我在调整大小后以新的高度重新加载页面时，显然所有内容都会重新适应。
使用div标记。
为内容创建单独的分区。
然后，您可以尽可能多地自定义所有内容。
我暂时解决了这个问题，如下所示：

CSS

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

a > img {
    height: 100%;
}

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

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

演示

您可以使用jquery来完成


我只是将锚点的宽度设置为与图像的宽度相同。我想不出只有CSS怎么做

注意：我知道您希望页面的高度为100%，但我假设您拥有的块在页面内，那么为什么不能以宽度百分比为基础呢？如果以高度为基础，则当您仅更改页面宽度时，图像不会在chrome中调整大小
，因为图像正在调整大小，因此图像不会正确缩放，也不会显示红色incorrectly@insertusernamehere看看这把小提琴。这是你想要的吗？你需要它根据高度而不是宽度调整大小有什么特别的原因吗？@Huangism是的，页面必须始终具有100%的高度-宽度是灵活的。如果有人有其他或更好的想法，我将不胜感激。
$(window).on('resize', function() {
    $('a').css('width', $('img').width());
});