本教程操作环境：windows7系统、css3版，dell g3电脑。
推荐：《css视频教程》
有时我们希望图片能随屏幕大小的缩放而缩放，两种情况：
单个图片缩放
图片在盒子内缩放
裸图片的缩放
<style type="text/css"> img { width: auto; height: auto; max-width: 100%; max-height: 100%; }</style><body> <img src="https://i.loli.net/2018/06/17/5b2639a6e6c61.jpeg" alt="timg.jpeg" title="timg.jpeg" /></body>
图片在一个盒子内
<style type="text/css"> #box { width: auto; /* 盒子也要自动缩放 */ height: auto; max-width: 600px; max-height: 500px; /* 盒子的高度,需要大于图片100%宽度时 图片的高度 */ border: 5px solid yellow; } img { width: auto; height: auto; max-width: 100%; /* 只要宽度100% 结合前面 auto就可以了 */ }</style><body> <div id="box"> <img src="https://i.loli.net/2018/06/17/5b2639a6e6c61.jpeg" alt="timg.jpeg" title="timg.jpeg" /> 下面的文字 </div></body>
ps:
1 、利用width height auto 来缩放
2、利用max-width max-height 来设置最大宽高，为100%表示可原始最大。
以上就是css怎么让图片随屏幕变化大小的详细内容。