html - 如何让图像自动缩放(不使用断点)

Question

我正在使用 Flexbox，在我的网站上有一排文本 block 应该占据屏幕左侧 40% 的区域，而图像应该占据右侧 60% 的区域。但是，我希望在调整浏览器图像大小时图像比文本收缩得更快。

在那个地方使用 flex-shrink 似乎没有任何效果，图像看起来是固定大小的。我尝试切换到带有 background-image 属性集的 a，但由于 div 中没有任何内容，因此图像不可见。我可以对宽度和高度进行硬编码，但这违背了图像缩放的目的。

有什么办法吗？

Answer 1

尝试将图像的最大宽度设置为 100%，并将高度设置为自动。因此，它将始终缩放以适应父级的大小。

img{
    max-width :100%;
    height:auto;
}