文章内图片自适应的方法
img {
width: auto;
height: auto;
max-height: 100%;
max-width: 100%;
}使用上面的 CSS 方法是可以，还有别的方法吗？
1 个回答
因为自适应和响应式这两个术语的用法并不太统一，也不太确定题主的具体需求，所以就从两个角度一起来说一下。
Fluid Images
很大一部分情况下，我们讲自适应图片都是指实现同一图片在不同屏幕大小下自动适应宽度。
这种方案是不论屏幕尺寸大小，都是给用户同一图片，然后通过 CSS 使图片自动适应屏幕的大小（避免图片超出屏）。优点是实现简单，不需要提供或生成不同尺寸的图片。缺点是在小屏幕或网络条件较差的情况下，大图加载会稍慢，会使用更多流量。
除了直接对 img 标签应用 CSS 外，通常定义 CSS 辅助类会更为灵活，以下为 Bootstrap 框架中自适应图片的实现方案。
<img src="..." class="img-fluid" alt="...">.img-fluid {
max-width: 100%;
height: auto;
}Bootstrap 文档：https://getbootstrap.com/docs/5.3/content/images/#responsive-images
（可以看到文档中小标题是 Responsive images，但 CSS 类的名称又是 img-fluid。大概是因为大家更习惯 Responsive images 这个说法，但实际图片自动适应这种情况使用 Fluid image 的表达又更准确。）
Responsive Images
响应式图片（Responsive Images）则是根据浏览器大小，为用户提供不同尺寸的图片，减少小屏幕下大图的带宽消耗和加载时间。
对 Drupal 而言，从 Drupal 8 开始内核中便提供了 Responsive Image 模块（D7 有 Picture 模块）可以实现本概念下的功能，楼主可以先参考官方文档：https://www.drupal.org/docs/mobile-drupal-sites/responsive-images
如果不考虑使用第三方模块，也可以参考 MDN 文档 https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embe…
小结
Fluid Images 和 Responsive Images 可以结合使用。通过 Responsive Images 基于不同的屏幕大小提供不同尺寸的图片，实现小屏幕下的节省带宽和加载提速。结合 Fluid Images 实现图片自动适应窗口的大小，为用户提供更好的视觉体验。
