CSS网格-列的规则必须尽可能窄，但最大宽度为50%

我有一个非常简单的网格，有两列。左栏是图片，右栏是一些文本

我希望左栏调整到图片宽度（因此栏必须尽可能窄，只要图片合适）。但我也希望这列最多占网格宽度的50%

我尝试了以下几种方法：

display: grid;
grid-template-columns: minmax(auto, 50%) 1fr;

但这是行不通的：左列总是占50%，即使是一张小照片

那么，如果图片较小，我如何告诉它采取较小的宽度

---

（请注意，图片的宽度是

最大宽度：100%

）

如果您的思路正确，您可以使用

minmax（）

和

max content

的组合

将图像列设置为最小值

auto

和最大值

max content

，同时将文本列设置为最小值

50%

和最大值

auto

grid-template-columns: minmax(auto, max-content) minmax(50%, auto);

文本列上的最小值为50%将确保图片宽度永远不会超过50%，而最大值为“自动”将确保当图像宽度小于50%时，文本将变大

另一方面，图像上的最小“自动”将确保在小于50%时调整图像以适应图像大小。。。而max content的最大值允许文本列一直扩展到超过50%，以满足图像的固有宽度

您也可以对图像列使用

fit-content（）

，而不是

minmax（auto，max-content）

，但这与此相同（请参阅）

这里有一个片段：

#网格{
显示：网格；
网格模板列：minmax（自动，最大内容）minmax（50%，自动）；
}
img{
最大宽度：100%；
}
.表格项目{
边框：1px纯红；
}

一些文本

这似乎更适合flexbox，在图像上使用最大宽度：50%，在文本上使用flex grow:1