QResponsive is a component which forces the content to maintain an aspect ratio based on its width.

QResponsive API

Loading API...



  • 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 usage

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.

Basic usage

On some components

Below are just a few examples. QResponsive is not restricted to only QCard and QCarousel.

On QCard

On QCardSection

On QTable

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.

On QCarousel

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.

On QCard