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