纵横比

纵横比组件调整其内容大小以匹配所需的比例。

简介

纵横比是一个包装组件，用于快速调整内容大小以符合您首选的宽高比。诸如图像之类的媒体内容可以基于 CSS object-fit 属性进行拉伸、调整大小和裁剪。

基础知识

import AspectRatio from '@mui/joy/AspectRatio';

纵横比组件包裹着它调整大小的内容。要调整大小的元素必须是第一个直接子元素。默认比例为 16/9。

16/9

<AspectRatio sx={{ width: 300 }}>
  <Typography level="h2" component="div">
    16/9
  </Typography>
</AspectRatio>

<AspectRatio sx={{ width: 300 }}>
  <Typography level="h2" component="div">
    16/9
  </Typography>
</AspectRatio>

按 Enter 开始编辑

自定义

变体

纵横比组件支持 Joy UI 的四种全局变体：solid、soft（默认）、outlined 和 plain。

Solid

Soft

Outlined

Plain

比例

使用 ratio 属性更改纵横比，遵循 width/height 模式。例如，下面的演示使用 4/3 的比例，这是默认 16/9 的常见替代方案

4/3

<AspectRatio
  variant="outlined"
  ratio="4/3"
  sx={{ width: 300, bgcolor: 'background.level2', borderRadius: 'md' }}
>
  <Typography level="h2" component="div">
    4/3
  </Typography>
</AspectRatio>

<AspectRatio
  variant="outlined"
  ratio="4/3"
  sx={{ width: 300, bgcolor: 'background.level2', borderRadius: 'md' }}
>
  <Typography level="h2" component="div">
    4/3
  </Typography>
</AspectRatio>

按 Enter 开始编辑

对象适配

当纵横比组件内部的内容是图像或视频时，您可以使用 objectFit 属性来控制其调整大小的方式。

此属性使您可以访问与 CSS object-fit 属性关联的所有值：cover（默认）、contain、fill、scaleDown、initial、inherit 和 none。

<AspectRatio objectFit="contain">
  <img
    src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800"
    srcSet="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800&dpr=2 2x"
    alt="A beautiful landscape."
  />
</AspectRatio>

<AspectRatio objectFit="contain">
  <img
    src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800"
    srcSet="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800&dpr=2 2x"
    alt="A beautiful landscape."
  />
</AspectRatio>

按 Enter 开始编辑

媒体占位符

当没有提供媒体内容时，使用 <div> 或与图标配对的Box 组件作为后备

标题

卡片的描述。

<Card variant="outlined" sx={{ width: 300 }}>
  <AspectRatio>
    <div>
      <ImageIcon sx={{ fontSize: '3rem', opacity: 0.2 }} />
    </div>
  </AspectRatio>
  <div>
    <Typography level="title-md">Title</Typography>
    <Typography level="body-sm">Description of the card.</Typography>
  </div>
</Card>

<Card variant="outlined" sx={{ width: 300 }}>
  <AspectRatio>
    <div>
      <ImageIcon sx={{ fontSize: '3rem', opacity: 0.2 }} />
    </div>
  </AspectRatio>
  <div>
    <Typography level="title-md">Title</Typography>
    <Typography level="body-sm">Description of the card.</Typography>
  </div>
</Card>

按 Enter 开始编辑

最小和最大高度

使用 minHeight 和 maxHeight 属性设置内容的最小和最大高度。当纵横比组件包裹动态宽度内容时，这很有用，如下面的演示所示

<AspectRatio minHeight={120} maxHeight={200}>
  <img
    src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800"
    srcSet="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800&dpr=2 2x"
    alt=""
  />
</AspectRatio>

<AspectRatio minHeight={120} maxHeight={200}>
  <img
    src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800"
    srcSet="https://images.unsplash.com/photo-1502657877623-f66bf489d236?auto=format&fit=crop&w=800&dpr=2 2x"
    alt=""
  />
</AspectRatio>

按 Enter 开始编辑

在 flex 行内使用

当纵横比组件是 flexbox row 容器的子元素时，使用 flex-basis 设置内容的理想宽度

优胜美地国家公园

美国，加利福尼亚州

flexBasis

像素

默认情况下，纵横比组件将保留提供的纵横比。如果您希望纵横比组件填充垂直空间，请将 flex 属性设置为 true

Flex

21 / 9

2023 年 4 月 20 日

小部件标题

Lorem ipsum 是图形中常用的占位符文本。

与 Next.js Image 一起使用

纵横比组件可以与 Next.js Image 组件一起用作子组件。Image 应该始终包含 layout="fill" 属性——否则它需要 height 和 width 值，这将违背纵横比组件的目的。

import Image from 'next/image';
import AspectRatio from '@mui/joy/AspectRatio';
import mountains from '../public/mountains.jpg';

function App() {
  return (
    <AspectRatio variant="outlined" ratio="1" objectFit="cover">
      {/* only layout="fill" makes sense for using with AspectRatio */}
      <Image alt="Mountains" src={mountains} layout="fill" placeholder="blur" />
    </AspectRatio>
  );
}

与图标一起使用

纵横比组件可以成为创建图标的方形容器的便捷工具。

常见示例

移动轮播

在这样的设计中，请务必分配 minWidth 值以防止纵横比组件缩小。

夜景

421 万次观看

湖景

474 万次观看

山景

398 万次观看

{data.map((item) => (
  <Card orientation="horizontal" size="sm" key={item.title} variant="outlined">
    <AspectRatio ratio="1" sx={{ minWidth: 60 }}>
      <img
        srcSet={`${item.src}?h=120&fit=crop&auto=format&dpr=2 2x`}
        src={`${item.src}?h=120&fit=crop&auto=format`}
        alt={item.title}
      />
    </AspectRatio>
    <Box sx={{ whiteSpace: 'nowrap', mx: 1 }}>
      <Typography level="title-md">{item.title}</Typography>
      <Typography level="body-sm">{item.description}</Typography>
    </Box>
  </Card>
))}

{data.map((item) => (
  <Card orientation="horizontal" size="sm" key={item.title} variant="outlined">
    <AspectRatio ratio="1" sx={{ minWidth: 60 }}>
      <img
        srcSet={`${item.src}?h=120&fit=crop&auto=format&dpr=2 2x`}
        src={`${item.src}?h=120&fit=crop&auto=format`}
        alt={item.title}
      />
    </AspectRatio>
    <Box sx={{ whiteSpace: 'nowrap', mx: 1 }}>
      <Typography level="title-md">{item.title}</Typography>
      <Typography level="body-sm">{item.description}</Typography>
    </Box>
  </Card>
))}

按 Enter 开始编辑

列表堆叠

这是一个关于如何将纵横比与列表组件一起使用的简单说明

夜景
421 万次观看
湖景
474 万次观看
山景
398 万次观看

解剖结构

纵横比组件由一个根 <div> 和一个嵌套在内部的内容 <div> 组成；子组件被赋予一个 data-first-child 属性用于样式目的

<div class="MuiAspectRatio-root">
  <div class="MuiAspectRatio-content">
    <some-element data-first-child>
      <!-- Aspect Ratio contents -->
    </some-element>
  </div>
</div>

API

请参阅下面的文档，以获取此处提及的组件的所有属性和类的完整参考。

<AspectRatio />