为什么图片不按预期缩放？
在html布局中，当我们将图片（）放置在具有特定宽度的容器（如
）内部时，图片默认情况下不会自动缩放以适应其父容器的宽度。除非另行指定，图片通常会以其原始尺寸显示。这意味着，即使父 div 被设置为占据页面宽度的某个百分比（例如 width: 30%），其内部的图片如果尺寸过大，仍会溢出容器，破坏页面布局。这是因为 div 的宽度限制了其内容区域，但并不强制其内部的替换元素（如 ![掌握HTML Div容器内图片响应式缩放技巧]()
）遵循这一限制。
核心解决方案：width: 100%
要解决图片溢出容器的问题，核心方法是明确告诉图片元素，它应该占据其父容器的全部可用宽度。这通过CSS属性 width: 100% 来实现。当应用于 标签时，width: 100% 意味着图片将自动调整大小，使其宽度与其直接父容器的宽度保持一致。
实现方法
有两种主要方式可以将 width: 100% 应用于图片：通过CSS样式表或通过内联样式。
1. 使用CSS样式表（推荐）
将样式定义在外部或内部CSS样式表中，可以实现样式的集中管理和复用，是更推荐的做法。
/* style.css 或