css - 如何使图像缩小以适合固定位置的 flexbox 模态

Question

如何使图像缩小以适合固定位置的 flexbox 模态？

尝试下面的图像时，图像会与页眉/页脚重叠。它需要在 IE 中同时适用于高或宽的图像。

.modal-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.modal-header {
  background: red;
  margin: 20px;
}

.modal-body {
  background: green;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 20px;
}

.modal-footer {
  background: blue;
  margin: 20px;
}

<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        header
      </div>
      <div class="modal-body">
        <img src="https://via.placeholder.com/900x1200" />
      </div>
      <div class="modal-footer">
        footer
      </div>
    </div>
  </div>
</div>

请注意，这是一个简单的示例，我实际上使用的是复杂的 SVG，而不是图像标签，因此我不能使用背景图像。

Answer 1

您可以使用带有最大宽度和 最大高度 的旧式 position: absolute:

/* for demonstration I have replaced all irrelavant styles with this */
.modal-body {
  width: 80vw;
  height: 60vh;
  margin: 10% auto 0;
  background: green;
}
/* parent must be positioned */
.modal-body {
  position: relative;
}
/* size and center */
.modal-body img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

<div class="modal-body">
  <img src="https://via.placeholder.com/900x1200" />
</div>