如何使图像缩小以适合固定位置的弹性框模态

Question

如何使图像缩小以适应固定位置的弹性框模态？

当尝试下面的图像重叠页眉/页脚。它需要适用于高、宽和 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

您可以使用带有 max-width 的旧 position: absolute 和 max-height：

/* 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>

Answer 2

只是提醒一下，但默认情况下图片会尝试保持其纵横比，因此只需设置百分比宽度即可让内联图片增长到适当的高度或设置只有百分比的高度会保持宽度。

关键是只设置一个维度，让浏览器找出其余的。

如果您使用适当的 HTML 结构设置尺寸内联，则尤其如此。

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

现在您只需使用 CSS 设置容器的最大宽度，一切都会很顺利。对于img 标签的任何使用都应该如此。这意味着如果您在 img src 属性中使用 SVG，您将使其像图像一样运行。也就是说，如果你这样做，我相信你会失去 SVG 交互。

---

因此，假设您实际上要将 SVG 放入您的代码中，您需要对 SVG 做一些工作。

注意大多数 SVG 如何在标题中硬编码高度和宽度只需 删除硬编码的高度/宽度“应该”使 SVG 正确缩放，因为 view-box 保持比例图片。

<svg width="299px" height="138px" viewBox="0 0 299 138" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="example">
            <rect id="Rectangle" fill="#D8D8D8" x="0" y="0" width="299" height="138"></rect>
            <circle id="Oval" fill="#46BEC6" cx="53" cy="50" r="26"></circle>
            <circle id="Oval-Copy" fill="#46BEC6" cx="105" cy="76" r="26"></circle>
            <circle id="Oval-Copy-2" fill="#46BEC6" cx="165" cy="95" r="26"></circle>
            <circle id="Oval-Copy-3" fill="#46BEC6" cx="217" cy="63" r="26"></circle>
            <circle id="Oval-Copy-4" fill="#46BEC6" cx="269" cy="32" r="26"></circle>
        </g>
    </g>
</svg>



<svg viewBox="0 0 299 138" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="example">
            <rect id="Rectangle" fill="#D8D8D8" x="0" y="0" width="299" height="138"></rect>
            <circle id="Oval" fill="#46BEC6" cx="53" cy="50" r="26"></circle>
            <circle id="Oval-Copy" fill="#46BEC6" cx="105" cy="76" r="26"></circle>
            <circle id="Oval-Copy-2" fill="#46BEC6" cx="165" cy="95" r="26"></circle>
            <circle id="Oval-Copy-3" fill="#46BEC6" cx="217" cy="63" r="26"></circle>
            <circle id="Oval-Copy-4" fill="#46BEC6" cx="269" cy="32" r="26"></circle>
        </g>
    </g>
</svg>

---

如果您不知道需要设置哪一个（例如在动态图像的情况下），您需要在应用正确的测量之前使用 javascript 对其进行测量。大致如下：

fixImage(){
  var img = findTheImageInTheDom;
  if (img.width > img.height){
    img.width = "100%";
  } else {
    img.height = "100%";
}