我有一个两列布局 - 右列宽度固定，左列内容可缩放。
布局可以随着不同的屏幕尺寸而缩放，直到我将图像添加到可缩放列中。如果容器减小到图像的大小，则会将列推得太宽，从而挤压我的 300 像素右列。
我设置了
width:100%;
在图像上，这解决了响应能力问题，但是当容器再次全屏显示时，图像会缩放以填充它，这不是我想要的，因为它看起来很垃圾。我已经添加了
max-width:100%;
这没有帮助。
简而言之，我希望图像行为是“真实大小，除非容器较小，在这种情况下会收缩。”
(我应该提到我的两列布局是使用 Flexbox 完成的)
编辑: 经过多年的研究，结果发现浏览器之间的行为有所不同 - Chrome 缩放容器，缩小图像(根据最大宽度)，但 Firefox 只是将所有内容推出。在每个中打开:https://jsfiddle.net/andyg1/sb7zefr5/
最佳答案
删除 width:100%; 并保留 max-width:100%;。这将使图像保持原始大小，但如果容器较小，则将其缩小到 100% 宽度。
关于html - 响应式图像，如果容器较大，则宽度不会为 100% - 容器为 Flexbox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37049362/