html - 为什么图像标签不会像 html 中的任何文本块一样收缩？

Question

请问我可以问一个愚蠢的问题吗？是的，我一直在做一个项目，遇到了以下元素结构：

它的一个部分将 70/30 分为左右两半。每个 hals 中都有文本 + 图标，但左边的文本在文本（1st）和 ICON（2nd）之后的文本右侧有内联。第二个在文本顶部有图标。

这是一个屏幕截图，以便更好地理解：

html结构如下：

<div class="block-wrapper">
    <img src="icon.png" height="140" width="130" alt="blabla" />
    <div class="text-block">Lorem Lorem Lorem</div>
</div>

块在主包装器中，即 flexbox。

我想要的是在浏览器宽度缩小时缩小的图像。如果你只是在 flex 容器中放置 2 个带有文本的 div 块并开始缩小浏览器的宽度，它将同时减小 2 个 div 的大小。我想和我的img标签一样

我知道 max-width: 100% 和 width: 100% 属性，但事实并非如此。

我找到的唯一解决方案是在图像周围制作一个 % 宽度的 div 包装器，并对图像说 max-width: 100%，但我不喜欢它。任何其他解决方案的想法来解决它？同样，我的字体大小随着宽度的减小而减小，我希望图像也减小其大小。

https://jsfiddle.net/Julesezaar/64otbdw7/

标签： htmlcssimageresponsive-design