时间戳

首页 > 解决方案 > 材质 UI 对话框，适合对话框高度内的图像

reactjs - 材质 UI 对话框，适合对话框高度内的图像

问题描述

我有一个 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>

标签： reactjsresponsive-designmaterial-ui

解决方案

你不能将图像高度设置为包含它的元素的 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>

推荐阅读