Relative to the parent
width と height のユーティリティは _utilities.scss から生成されます。デフォルトでは 25%, 50%, 75%, 100%, auto がサポートされています。カスタムしたい場合は、これらの値を変更してください。
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
vue
<template>
<b-div
relative-width="25"
padding="3"
>
Width 25%
</b-div>
<b-div
relative-width="50"
padding="3"
>
Width 50%
</b-div>
<b-div
relative-width="75"
padding="3"
>
Width 75%
</b-div>
<b-div
relative-width="100"
padding="3"
>
Width 100%
</b-div>
<b-div
relative-width="auto"
padding="3"
>
Width auto
</b-div>
</template>
Height 25%
Height 50%
Height 75%
Height 100%
Height auto
vue
<template>
<b-div style="height: 100px;">
<b-div
relative-height="25"
display="inline-block"
style="width: 120px;"
>
Height 25%
</b-div>
<b-div
relative-height="50"
display="inline-block"
style="width: 120px;"
>
Height 50%
</b-div>
<b-div
relative-height="75"
display="inline-block"
style="width: 120px;"
>
Height 75%
</b-div>
<b-div
relative-height="100"
display="inline-block"
style="width: 120px;"
>
Height 100%
</b-div>
<b-div
relative-height="auto"
display="inline-block"
style="width: 120px;"
>
Height auto
</b-div>
</b-div>
</template>
頻繁に使う max-width: 100%; と max-height: 100%; を使うことができます。
vue
<template>
<b-div flex>
<b-img
src="https://dummyimage.com/200x200/868e96/ffffff&text=Max%20width%20100%25"
rounded
float="start"
alt="200x200"
max-width
/>
</b-div>
</template>
Max-height 100%
vue
<template>
<b-div style="height: 100px">
<b-div
max-height
style="
width: 100px;
height: 200px;
"
>
Max-height 100%
</b-div>
</b-div>
</template>
Relative to the viewport
Viewport 単位の width や height を指定できます。
vue
<template>
<b-div min-viewport-width>
Min-width 100vw
</b-div>
<b-div min-viewport-height>
Min-height 100vh
</b-div>
<b-div viewport-width>
Width 100vw
</b-div>
<b-div viewport-height>
Height 100vh
</b-div>
</template>