CSS中最小宽度和最大宽度的用法

最大宽度属性帮助开发者限制文本或其他元素的宽度。最大宽度的目的是把你的元素限制在边界线以内。使用下面的代码就可以限制最大宽度,你还可以根据你的需要改变数值。

.container {

width: 800px;
max-width: 90%;
}

- 自适应图片大小

下面的代码可以帮你根据限制的宽度自动调节图片大小。你需要做的就是设最大宽度为100%高度自适应。

img {
max-width: 100%;
height: auto;
}

不过对IE8上面的代码需要做些许调整,因为上面的代码只对IE7和IE9起效。对IE8如下:

@media \0screen {
img {
width: auto; /* for ie 8 */
}
}

- 最小宽度

要时刻记得最大宽度和最小宽度的区别。最大宽度把所有元素限制在框内,而最小宽度为文本或其他元素设置最小宽度。不过应用这个样式,到达最小宽度后你的网页不会更进一步按比例缩小。

posted @ 2013-01-07 13:46  ctou45  阅读(2212)  评论(0编辑  收藏  举报