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

为了实现这一点，您可以使用视图高度单位（vh）。沿组合maxHeight（基于 vh）maxWidth: 100%。对话框使用 32px 作为边距，因此您可以使用maxHeight: "calc(100vh - 64px)"或者可以使用自定义 vh，例如maxHeight: "80vh"

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