如何设置图片sizes与srcset属性实现自适应最大宽度控制

我太懂你这个博客上传场景的痛点了——用户上传的图片尺寸五花八门，既要保证小图不被强行拉伸变形，又要让大图自动适配容器宽度，还没法提前固定图片尺寸对吧？

你之前的问题根源在width: 100%这个属性上：它会强制把图片宽度拉到容器的100%（也就是500px），哪怕原图只有50px，这时候max-width: 100%根本没机会生效，因为图片宽度已经被固定成容器宽度了。

给你一个完美适配需求的CSS方案：

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

原理拆解： #

• width: auto：让图片优先使用自身的原始宽度，小图（比如50px宽）就会保持原尺寸，不会被无端拉伸。
• max-width: 100%：当图片的原始宽度超过容器宽度（500px）时，这个属性会自动把图片宽度限制为容器的100%，避免图片超出容器范围。
• height: auto：保证图片的宽高比始终不变，不会因为宽度调整而出现变形问题。

这个写法完全贴合你的需求：不用提前知晓图片的实际宽度，小图原样展示，大图自动收缩适配容器，完美适配博客的图片上传场景。

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