diff options
author | Mario <mario@mariovavti.com> | 2023-05-17 13:28:23 +0000 |
---|---|---|
committer | Mario <mario@mariovavti.com> | 2023-05-17 13:28:23 +0000 |
commit | 65d98af24c3c7b784f7e2c95998df65901011ce3 (patch) | |
tree | d7d6a60698d7a0c3704ea55cb71c543285186b17 /vendor/twbs/bootstrap/site/content/docs/5.3/utilities/object-fit.md | |
parent | a57739c462a7991bf2130e8eca0c383eb276f0cd (diff) | |
parent | 62d35627f35537d0056482047e74a27ad837c3cf (diff) | |
download | volse-hubzilla-65d98af24c3c7b784f7e2c95998df65901011ce3.tar.gz volse-hubzilla-65d98af24c3c7b784f7e2c95998df65901011ce3.tar.bz2 volse-hubzilla-65d98af24c3c7b784f7e2c95998df65901011ce3.zip |
Merge branch '8.4RC'8.4
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.3/utilities/object-fit.md')
-rw-r--r-- | vendor/twbs/bootstrap/site/content/docs/5.3/utilities/object-fit.md | 20 |
1 files changed, 10 insertions, 10 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/object-fit.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/object-fit.md index 4d6c476eb..debd495e8 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/object-fit.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/object-fit.md @@ -23,11 +23,11 @@ Classes for the value of `object-fit` are named using the format `.object-fit-{v Add the `object-fit-{value}` class to the [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element): {{< example class="d-flex overflow-auto" >}} -{{< placeholder width="140" height="120" class="object-fit-contain border rounded" text="Object fit contain" markup="img" >}} -{{< placeholder width="140" height="120" class="object-fit-cover border rounded" text="Object fit cover" markup="img" >}} -{{< placeholder width="140" height="120" class="object-fit-fill border rounded" text="Object fit fill" markup="img" >}} -{{< placeholder width="140" height="120" class="object-fit-scale border rounded" text="Object fit scale down" markup="img" >}} -{{< placeholder width="140" height="120" class="object-fit-none border rounded" text="Object fit none" markup="img" >}} +{{< placeholder width="140" height="120" class="object-fit-contain border rounded" text="Object fit contain" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="120" class="object-fit-cover border rounded" text="Object fit cover" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="120" class="object-fit-fill border rounded" text="Object fit fill" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="120" class="object-fit-scale border rounded" text="Object fit scale down" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="120" class="object-fit-none border rounded" text="Object fit none" markup="img" color="#868e96" background="#dee2e6" >}} {{< /example >}} ## Responsive @@ -35,11 +35,11 @@ Add the `object-fit-{value}` class to the [replaced element](https://developer.m Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `xxl`. Classes can be combined for various effects as you need. {{< example class="d-flex overflow-auto" >}} -{{< placeholder width="140" height="80" class="object-fit-sm-contain border rounded" text="Contain on sm" markup="img" >}} -{{< placeholder width="140" height="80" class="object-fit-md-contain border rounded" text="Contain on md" markup="img" >}} -{{< placeholder width="140" height="80" class="object-fit-lg-contain border rounded" text="Contain on lg" markup="img" >}} -{{< placeholder width="140" height="80" class="object-fit-xl-contain border rounded" text="Contain on xl" markup="img" >}} -{{< placeholder width="140" height="80" class="object-fit-xxl-contain border rounded" text="Contain on xxl" markup="img" >}} +{{< placeholder width="140" height="80" class="object-fit-sm-contain border rounded" text="Contain on sm" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="80" class="object-fit-md-contain border rounded" text="Contain on md" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="80" class="object-fit-lg-contain border rounded" text="Contain on lg" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="80" class="object-fit-xl-contain border rounded" text="Contain on xl" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="80" class="object-fit-xxl-contain border rounded" text="Contain on xxl" markup="img" color="#868e96" background="#dee2e6" >}} {{< /example >}} ## Video |