The need to change the aspect ratio and sizes for image/media elements
Bootstrap ~5.3.0 Documentation on Ratios
Having Two Bootstrap Ratio Utilities
Responsive ratio utility
Ratio Utility with responsive options, which needed for switching ratios for media breakpoints.
Adds (
-sm,-md,-lg,-xl,-xxl) to ratio classes to change the ratio for that breakpointUse the normal ration classes for mobiles which less than
-sm
Flip Ratio Utility
Flip Ratio Utility, which needed for flipping ratios for media breakpoints.
Adds (
-flip-xs,-flip-sm,-flip-md,-flip-lg,-flip-xl,-flip-xxl) to ratio classes to change the ratio for that brackpoint
Use the-flip-xsratio classes for mobiles which less than-flip-smor-smin case of using both ratio utilities at the same time.
npm i bootstrap-ratio-utilities
or
yarn add bootstrap-ratio-utilities
Add the Flip Ratio Utility
// Flip ratio utility.
@import "../../node_modules/bootstrap-ratio-utilities/utilities/scss/flip-ratio.scss";
Following with
// Override aspect ratios array to add more ratios.
$aspect-ratios: (
"1x1": 100%,
"2x1": calc(1 / 2 * 100%),
"3x1": calc(1 / 3 * 100%),
"4x1": calc(1 / 4 * 100%),
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%),
);
Fixed
3.0
Code
Issue #3425191: Add Flip Ratio Utility to Bootstrap Ratio Utilities in...
Automatically closed - issue fixed for 2 weeks with no activity.