Material UI 对话框，使图像适合对话框的高度

Question

我有一个 Material UI 对话框，它将显示一堆图像，图像具有横向或纵向的纵横比。他们也可能有不同的决议。我想找到一个优雅的解决方案来保持对话框高度为屏幕的 80%。

但将整个图像放入对话框中，无需滚动，这里是 SandboxExample。

或找到下面的代码段：

<div>
  <Button variant="outlined" color="primary" onClick={handleClickOpen}>
    Open dialog
  </Button>
  <Dialog
    open={open}
    onClose={handleClose}
    hasCloseButton
    style={{ maxWidth: "100%", maxHeight: "100%" }}
  >
    <img
      style={{ maxWidth: "100%", height: 'auto' }}
      src="https://images.unsplash.com/photo-1565992441121-4367c2967103"
      alt="image"
    />
  </Dialog>
</div>

Answer 1

你不能将图像高度设置为包含它的元素的 100% 吗？

我在你的沙盒上做了这个：style={{ width: 'auto', height: '100%' }} 并且它似乎有效。

完整代码如下：

<div>
  <Button variant="outlined" color="primary" onClick={handleClickOpen}>
    Open dialog
  </Button>
  <Dialog
    open={open}
    onClose={handleClose}
    hasCloseButton
    style={{ maxWidth: "100%", maxHeight: "100%" }}
  >
    <img
      style={{ width: 'auto', height: '100%' }}
      src="https://images.unsplash.com/photo-1565992441121-4367c2967103"
      alt="image"
    />
  </Dialog>
</div>

Answer 2

要实现这一点，您可以使用视图高度单位 (vh)。沿 maxWidth: 100% 合并 maxHeight（基于 vh）。 Dialog 使用 32px 作为边距，因此你可以使用 maxHeight: "calc(100vh - 64px)" 或者你可以使用像 maxHeight: "80vh"

这样的自定义 vh

   <img
      style={{ maxWidth: "100%", maxHeight: "calc(100vh - 64px)" }}
      src="https://images.unsplash.com/photo-1565992441121-4367c2967103"
      alt="image"
    />

Material UI 对话框，使图像适合对话框的高度

Material UI dialog, fit image inside dialog's height

responsive-design

reactjs

material-ui