HTML img标签srcset属性使用异常及适配疑问咨询

问题1：为何始终下载450px图片？如何按屏幕尺寸切换图片？ #

你遇到的问题核心是浏览器不知道图片在页面中的实际显示宽度。当<img>没有通过size属性或CSS指定显示宽度时，浏览器会默认以图片的固有像素宽度（也就是450px）来评估需求——不管视口多小，它都会认为需要加载能覆盖这个固有宽度的图片，因此始终选择450w的版本。

要实现屏幕宽度≥450px时加载450px图、<450px时加载300px图，有两种简单方法：

• 方法一：添加size属性，明确告诉浏览器图片的显示宽度占比。比如让图片铺满整个视口：

<img src="assets/img/software-developer.jpeg" alt="Some Stuff"
     srcset="assets/img/software-developer-300.jpeg 300w,
             assets/img/software-developer.jpeg 450w"
     size="100vw">

• 方法二：用CSS直接定义图片的显示宽度：

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

两种方法都能让浏览器根据图片的实际显示宽度，匹配srcset中的w单位规则，自动选择合适的图片版本。

问题2：屏幕宽度<300px时让图片自适应缩小 #

只需要给<img>添加以下CSS样式，强制图片最大宽度不超过父容器（这里就是视口），同时保持宽高比自动缩放：

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

添加这个样式后，当视口小于300px时，图片会自动缩小到适配视口宽度，不会出现超出视口的情况，同时不会拉伸变形。

内容的提问来源于stack exchange，提问作者Salvatore D'angelo