![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=1738911535-kdD4XkFeSJbt5HNdLg2VaSF9GhKV3W1g-0-2e608ea675ab2476e73efaa63e5b20b4)
提示
.w-auto为宽度自适应类,.h-auto为高度自适应类。
【例5.15】相对于父元素。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P84_2598.jpg?sign=1738911535-km9QLlg6ing5QnkC2fPOoTzlO36yNShv-0-5a2ce390d94eb6d57add11b47055dfc3)
在IE 11浏览器中运行结果如图5-16所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P85_2626.jpg?sign=1738911535-0X0T41ywkJ5GffePKgJrCkmaPkfxcrto-0-3848f0bf984e839bf1b18510e99b3501)
图5-16 相对于父元素
除了上面这些类以外,还可以使用以下两个类:
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P85_11455.jpg?sign=1738911535-oIoPVkk1VeSGT2bmDyYZQc7ePTEK2L36-0-cf7670e771f6cf8883c602776007d4fe)
其中.mw-100类设置最大宽度,.mh-100类设置最大高度。这两个类多用来设置图片。例如,在一个元素盒子的尺寸是固定的,而要包含的图片的尺寸不确定的情况下,便可以设置.mw-100和.mh-100类,使图片不会因为尺寸过大而撑破元素盒子,影响页面布局。
【例5.16】最大宽度和高度示例。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P85_2631.jpg?sign=1738911535-EUtiMBLuPZ5cmyrMbeGoQ3xBEl5Yxbc1-0-332dfe2e0e618c30184f31449c403fcf)
在IE 11浏览器中运行结果如图5-17所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P86_2640.jpg?sign=1738911535-qj5IbH2UJJwAPJC71JJvpIg3ezrCCZ54-0-d8a8a83720bea6423898c4399ced185b)
图5-17 最大宽度和高度效果