Responsive
QResponsive 组件会强制内容根据其宽度保持长宽比。
QResponsive API
ratio
: String | Number
说明
内容的宽高比；如果值是一个字符串，则避免使用计算语句（如 '16/9'），而是直接指定结果的字符串值（例如 '1.7777'）
用法
提示
- 这个组件可以放置任何内容，只要只指定一个直接子元素即可。如果您有多个元素，可以使用一个
<div>包裹起来。 - 您需要确保内容不会溢出容器。
WARNING
不要将其用于已经具有 ratio 属性的 Quasar 组件，如 QImg 或 QVideo，或具有强制高度的组件。
基础
Ratio 16:9
Ratio 1:1
Flex row
注意，我们在下面的示例中使用了 items-start 来设置垂直对齐替换默认的 stretch，所以 flexbox 不会给 QResponsive 组件强制高度。
Ratio 16:9
Ratio 1:1
一些组件示例
下面只是一些例子。 QResponsive 不仅限于 QCard 和 QCarousel。
Ratio 16:9
Ratio 1:1
Title
Subhead
QCardSection with ratio 16:9
Title
Subhead
QCardSection with ratio 1:1
Table aspect ratio: 4/3
| # | Dessert (100g serving) | Calories | Fat (g) | Carbs (g) | Protein (g) | Sodium (mg) | Calcium (%) | Iron (%) |
|---|---|---|---|---|---|---|---|---|
| 0 | Frozen Yogurt | 159 | 6 | 24 | 4 | 87 | 14% | 1% |
| 1 | Ice cream sandwich | 237 | 9 | 37 | 4.3 | 129 | 8% | 1% |
| 2 | Eclair | 262 | 16 | 23 | 6 | 337 | 6% | 7% |
| 3 | Cupcake | 305 | 3.7 | 67 | 4.3 | 413 | 3% | 8% |
| 4 | Gingerbread | 356 | 16 | 49 | 3.9 | 327 | 7% | 16% |
| 5 | Jelly bean | 375 | 0 | 94 | 0 | 50 | 0% | 0% |
| 6 | Lollipop | 392 | 0.2 | 98 | 0 | 38 | 0% | 2% |
| 7 | Honeycomb | 408 | 3.2 | 87 | 6.5 | 562 | 0% | 45% |
| 8 | Donut | 452 | 25 | 51 | 4.9 | 326 | 2% | 22% |
| 9 | KitKat | 518 | 26 | 65 | 7 | 54 | 12% | 6% |
| 10 | Frozen Yogurt | 159 | 6 | 24 | 4 | 87 | 14% | 1% |
| 11 | Ice cream sandwich | 237 | 9 | 37 | 4.3 | 129 | 8% | 1% |
| 12 | Eclair | 262 | 16 | 23 | 6 | 337 | 6% | 7% |
| 13 | Cupcake | 305 | 3.7 | 67 | 4.3 | 413 | 3% | 8% |
| 14 | Gingerbread | 356 | 16 | 49 | 3.9 | 327 | 7% | 16% |
| 15 | Jelly bean | 375 | 0 | 94 | 0 | 50 | 0% | 0% |
| 16 | Lollipop | 392 | 0.2 | 98 | 0 | 38 | 0% | 2% |
| 17 | Honeycomb | 408 | 3.2 | 87 | 6.5 | 562 | 0% | 45% |
1-1000 / 1000
注意，当我们在 QCarousel 上使用 QResponsive 时，我们不会为它提供 height 属性，因为由 QResponsive 会负责。
Ratio 16:9
最大高度
通过 CSS 类或内联样式设置的最大高度（或最大宽度等）将直接应用于 QResponsive 组件。请记住，您需要确保内容不会溢出容器。
Ratio 4:3, but max height of 100px