//HTML代码
<body>
<img src="http://www.chenxin.art/imgs/xingkong.jpg" alt="drawing" />
</body>
//CSS代码
img {
1200px;
max- 100%;
}
- 当浏览器的宽度大于或等于
1200px
时,因为图片的宽度为1200px
,满足“图片的宽度不能大于其父元素的宽度”这一限制条件,所以图片保持宽度1200px
不变。 - 当浏览器的宽度小于
1200px
时,此时不满足“图片的宽度不能大于其父元素的宽度”这一限制条件,所以图片会缩小到满足条件为止,最后的结果就是图片的宽度会等于浏览器的宽度。这就是为什么图片会随着窗口的变窄而变小了。
类似的 CSS 属性还有 min-width
、max-height
、min-height
,原理都是一样的,大家可以在这个网站上了解他们的详细用法。
媒体查询
@media(max-width:480px){
background:lightgreen
}
媒体查询的标识符是 @media
。上面这段代码的含义是:如果视窗的宽度小于 480px
时,将背景色变为淡绿色。