`. > - It is your responsibility to make sure that your content won't overflow the container. > [!WARNING] > 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 Example "Basic usage": ```vue ``` ### 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. ```vue ``` ### On some components Below are just a few examples. QResponsive is not restricted to only QCard and QCarousel. Example "On QCard": ```vue ``` Example "On QCardSection": ```vue ``` Example "On QTable": ```vue ``` 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. Example "On QCarousel": ```vue ``` ### 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. Example "Max height": ```vue ``` ## Accessibility *(v2.25+)* QResponsive is a purely presentational aspect-ratio wrapper with no accessibility surface of its own.