为何添加图片后<nav>元素的固定尺寸会发生变化？

为什么添加图片后导航栏尺寸看起来“变化”了？ #

你看到的并非导航栏本身尺寸改变，而是浏览器自动缩放了整个页面。根源是你添加的图片原始宽度为1024px，当屏幕宽度小于该值时，浏览器为了让完整图片显示在视口内，会缩放整个文档（包括固定定位的导航栏），导致导航栏看起来跟着屏幕变小——实际上导航栏的width始终是400px，只是页面被整体缩小了。

解决方法 #

给图片添加CSS样式，让它自适应视口宽度，避免触发页面缩放：

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

这样图片会自动缩小至与屏幕宽度匹配，不会超出视口范围，浏览器也就不会再缩放整个页面，导航栏就能保持固定的400px宽度了。

另外也可以给body添加overflow-x: hidden来横向截断超出的图片，但这种方式的用户体验不如让图片自适应友好。

内容的提问来源于stack exchange，提问作者Rony