img { width: auto; max-width: 100%; height: auto; }
上面的代码通过给img标签添加样式来限制其宽度。其中,width: auto;
表示图片宽度会根据其高度自动调整,max-width:100%;
表示图片宽度最大为100%,这样可以确保图片不会超出其容器的宽度范围。最后,height: auto;
表示图片高度也将按比例自动调整。
通过这样的设置,大家可以让图片在应用于不同大小的设备时自动适应屏幕大小,确保页面布局的完美呈现,让用户获得更好的浏览体验。