reactjs - 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

要实现这一点，您可以使用 View 高度单位 (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"
    />