如何在 Angular Material 的对话框中放置图像？答案

【问题标题】：How do I fit an image inside of a dialog box in Angular Material?如何在 Angular Material 的对话框中放置图像？
【发布时间】：2021-07-27 06:42:27
【问题描述】：

我正在尝试将图像完全放入对话框窗口中，而不会溢出屏幕或在每一侧都出现滚轮。我希望对话框窗口永远不会填满整个屏幕，而是填满大部分屏幕（比如任一轴的 80%）。但我被困在永远不会自动调整大小以适合该框的图像上。

目前，如果图像的高度太大，我尝试的所有内容都会在右侧显示一个条形。

理想情况下，我希望有一个自动调整大小以适应屏幕的图像。

这是我的对话框 css

.full-width-dialog .mat-dialog-container {
  // max-width: 80vw !important;
  max-height: 80vh !important;
  padding: 0;
  display: flex;
  flex-direction: column;
}

还有我的图片容器 css


.image-cont {
  display: flex;
  flex: 1 1 0;

  img {
    max-width: 100%;
    max-height: 100%;
  }
}

以及对话框的html模板。

<div class="image-cont">
  <img
    id="{{ data.id }}"
    src="...SOME_IMAGE_LIBRARY___/id/{{ data.id }}/{{ data.width }}/{{ data.height}}" 
  />
</div>

请注意，src 始终是比屏幕大得多的图像。

【问题讨论】：

您可以通过developer.mozilla.org/en-US/docs/Web/CSS/background-size 实现background-size: cover;
抱歉，我不太确定如何使用它？只是将background-size: cover; 添加到 img 或 image-cont 容器并没有真正做任何事情。
您必须将图像设置为 .image-cont 包装器的背景图像。

标签： html css angular flexbox angular-material

【解决方案1】：

如果您不想像 Dominik 提到的那样将其设置为覆盖的背景图像，可以将对话框上的溢出设置为隐藏。这将隐藏滚动条。

.full-width-dialog .mat-dialog-container {
  // max-width: 80vw !important;
  max-height: 80vh !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow:hidden;
}

【讨论】：

不幸的是，这将切断高度大于宽度的图像。在高度较大的情况下，我希望它最大化屏幕高度并减小宽度以适应。
我明白了，我被你问题中的滚动条抓住了。你有你正在处理的代码的一个活生生的例子吗？
我没有将它托管在任何地方，但我只是将代码上传到github1s，唯一会改变事情的css文件是底部.full-width-dialog .mat-dialog-container下的theme.scss因为它是在打开对话框时添加到 gallery-dash.component.ts 中的，并且 dialog-view.component.scss. 它与前面显示的有点不同，但我仍然有同样的问题。
你试过把父div的高度和宽度设置为100%吗？
我试过了，它似乎没有任何作用。

【解决方案2】：

我可以通过稍微强迫它来解决这个问题。

<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="3vw" class="dialog">
  <div class="image-cont">
    <img
      id="{{ data.id }}"
      src="https://picsum.photos/id/{{ data.id }}/{{ data.original_width }}/{{
        data.original_height
      }}"
    />
  </div>
</div>

然后是 CSS

.image-cont {
  position: relative;
  height: 100%;
  width: 80%;
  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
  }
}

.dialog {
  height: 80vh;
  width: 80vw;
  display: flex;
  flex-direction: row;
}

和

.full-width-dialog .mat-dialog-container {
  padding: 0;
  background: none;
  box-shadow: none;
}

完全应用于对话框。

【讨论】：