为何设置CSS的width和height为auto无法调整图片尺寸？

嘿，我完全懂你的困惑——明明给图片设了width: auto和height: auto，结果它还是大到要横向滚动才能看全，这确实有点反直觉！咱们一步步拆解问题：

首先，搞懂auto对于图片宽高的真正含义 #

auto在这里的作用是让图片使用它的原始固有尺寸——也就是你用的这张Solothurn全景图本身的1280px宽度。其实你写不写width: auto; height: auto;，浏览器都会默认按图片原始尺寸渲染，这就是为啥你设置后完全没变化的原因！

你要的“自适应缩放”，得用相对单位来实现 #

不想用固定像素、又要图片随浏览器窗口缩放，核心解决方案是用max-width: 100%替代width: auto，同时保留height: auto维持图片宽高比（避免变形）。

修改后的图片CSS可以简化成这样：

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  max-width: 100%; /* 关键：图片最大宽度不超过父容器的100% */
  height: auto; /* 自动计算高度，保持原始宽高比 */
  border: 2px solid black;
  border-radius: 20%; /* 你原来的四个圆角都是20%，合并成一行简化代码 */
}

为啥这个修改管用？ #

• max-width: 100%会让图片宽度永远不超过它的父容器（比如页面的<body>或者包裹它的<p>标签）。当浏览器窗口变窄时，父容器宽度跟着缩小，图片也会自动按比例缩小，彻底解决横向滚动的问题。
• height: auto会根据图片原始宽高比自动计算对应高度，保证图片不会被拉伸或压缩变形。

额外小技巧（可选） #

如果觉得图片在大窗口里显示得太宽，你可以给max-width加个具体上限，比如max-width: 800px，这样图片最大不会超过800px宽，同时在小窗口里依然能自适应缩小。

最后记得确认图片的父容器没有设置固定宽度，这样max-width:100%才能正常生效哦！

内容来源于stack exchange