css 给图片做自适应 |css3响应式布局 案例

首先，大家需要在 HTML 中插入一张图片：

<img src="图片路径" alt="图片描述">

其中，src属性用于指定图片的路径，alt属性则是在图片无法加载时显示的文本。接下来，大家利用 CSS 对图片进行自适应处理：

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

这段 CSS 代码中，大家使用了max-width: 100%属性，使得图片的宽度最大可以达到容器的宽度，从而实现图片的自适应。同时，大家还使用了height: auto属性来确保图片的高度可以根据宽度的变化而自适应调整。以此来实现图片的自适应处理。

除了上述的方法，使用 CSS 进行图片自适应的方式还有很多，比如：

• 使用object-fit属性，控制图片在容器内的展示方式；
• 使用background-image属性，将图片设置为背景图片（需要设置background-size属性）；
• 使用position属性，对图片进行定位，并配合使用@media查询实现不同设备下的自适应。

总之，CSS 提供了诸多方法来帮助大家实现图片的自适应，大家只需要根据具体的需求和使用场景，选择合适的方式进行处理即可。