CSS实现图片在移动端与桌面端自适应问题求助

数据老陈

2026-7-5

解决方案

检查图片的CSS宽度配置：
给目标图片添加max-width: 100%和height: auto的样式，确保它能随容器宽度自适应，同时保持宽高比。示例代码：
```
img[src*="rinconcriollo3.png"] {
  max-width: 100%;
  height: auto;
}
```
排查媒体查询的冲突：
检查是否存在针对桌面端的媒体查询（如@media (min-width: 768px)），其中可能覆盖了图片的自适应属性，确保桌面端也应用上述的自适应样式。
检查父容器的宽度限制：
确认图片的父容器没有设置固定像素宽度，或者父容器的宽度设置为弹性值（如width: 100%），避免容器限制图片的自适应范围。
验证HTML嵌套结构：
确保图片没有被嵌套在固定宽度的表格、固定尺寸的div等元素内，这类容器会阻断图片的自适应逻辑。