当前第2页 返回上一页
图片在一个盒子内
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <style type="text/css">
#box {
width: auto;
height: auto;
max-width: 600px;
max-height: 500px;
border: 5px solid yellow;
}
img {
width: auto;
height: auto;
max-width: 100%;
}
</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怎么让图片随屏幕变化大小的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
css的基本选择器有哪几种
css的伪类有哪些
css如何设置字体
css怎么去掉a标签的颜色
css怎么设置字体间隔
如何合理使用css框架？
关于css文本属性的详细介绍
css怎么设置文字超过隐藏
如何解决浏览器不加载css文件的问题
前端项目开始制作前初始化css必要性
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css怎么让图片随屏幕变化大小
