![Bootstrap从入门到项目实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/95/27738095/b_27738095.jpg)
上QQ阅读APP看书,第一时间看更新
5.4.1 相对于父元素
相对于父元素的宽度和高度样式类是由_variables.scss文件中$sizes变量来控制的,默认值包括25%、50%、75%、100%和auto。用户可以调整这些值,定制不同的规格。
具体的样式代码如下:
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P84_2595.jpg?sign=1738857484-Ll8JCmB9VUcrcWJK5Hkx7b55j6FXSUdD-0-0a24268fbe570d8c367b746cdf98cbb0)
提示
.w-auto为宽度自适应类,.h-auto为高度自适应类。
【例5.15】相对于父元素。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P84_2598.jpg?sign=1738857484-SycjOiTmjoHR8yGJpWjqGV8XiOXa2X0y-0-9f61274939a497c6d2e34066cbacd508)
在IE 11浏览器中运行结果如图5-16所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P85_2626.jpg?sign=1738857484-UAO9v63ydwfUyUAnhIymg756OO979MjP-0-fe4457cf80533e0703e350ec8901a700)
图5-16 相对于父元素
除了上面这些类以外,还可以使用以下两个类:
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P85_11455.jpg?sign=1738857484-AP4x86tce4AQ0dPy0lh9Cx0inzjzSkdt-0-240d5194582e5c769645b42780ee33ce)
其中.mw-100类设置最大宽度,.mh-100类设置最大高度。这两个类多用来设置图片。例如,在一个元素盒子的尺寸是固定的,而要包含的图片的尺寸不确定的情况下,便可以设置.mw-100和.mh-100类,使图片不会因为尺寸过大而撑破元素盒子,影响页面布局。
【例5.16】最大宽度和高度示例。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P85_2631.jpg?sign=1738857484-jMkk18GCanKJuM0g468TJDjK5oXa5Wwn-0-fb2e4846614ee583c3107a916c654a5c)
在IE 11浏览器中运行结果如图5-17所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P86_2640.jpg?sign=1738857484-v2QHWpGR16Ktem8xSoUQ1hdwlPCbpouQ-0-b0babdb5309794cec366e18929a74dff)
图5-17 最大宽度和高度效果