css让图片随屏幕变化大小的方法:1、利用“width height auto”属性来缩放图片;2、利用“max-width max-height”属性来设置最大宽高。
本教程操作环境: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怎么让图片随屏幕变化大小的详细内容。更多信息请关注PHP中文网其他相关文章!