QResponsive is a component which forces the content to maintain an aspect ratio based on its width.
Usage
- The component can be used with any content, as long you specify only one direct child. If you need multiple elements inside of it, wrap them in a
<div>. - It is your responsibility to make sure that your content won’t overflow the container.
Do not use it on Quasar components that already have a ratio property, like QImg or QVideo, or on components that have a forced height.
Basic
Flex row
Note below that we are using a vertical alignment (items-start) other than the default (stretch), so that flexbox won’t force the height on each QResponsive component.
On some components
Below are just a few examples. QResponsive is not restricted to only QCard and QCarousel.
Notice that we will not supply a height prop to QCarousel when we use QResponsive on it, since it’s QResponsive who will take care of that.
Maximum height
Apply the max height (or max width, etc etc) directly on the QResponsive component through a CSS class or inline. Remember that it is still your responsibility to ensure that the content won’t overflow the container.
Accessibility v2.25+
QResponsive is a purely presentational aspect-ratio wrapper with no accessibility surface of its own.