如何应用对象适配：也包含到div？

Question

可以使用object-fit: contain来调整图像的大小，以使整个图像适合框架，使图像的长边与框架对齐。

h2 {
  font-family: Courier New, monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 940px;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
}

.narrow {
  width: 100px;
  height: 150px;
  margin-top: 10px;
}

.contain {
  object-fit: contain;
}

<div>

  <h2>object-fit: contain</h2>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain" />

  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow" />

</div>

但是，这不适用于div标签等，仅适用于替换元素。

 h2 {
  font-family: Courier New, monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 940px;
}

.contain-parent {
  width: 150px;
  height: 100px;
  background: red;
  border: 1px solid #000;
}

.narrow {
  width: 100px;
  height: 150px;
  background: green;
  margin-top: 10px;
}

.contain1 {
  width: 50px;
  height: 80px;
  background: blue;
  object-fit: contain;
}
.contain2 {
  width: 80px;
  height: 50px;
  background: blue;
  object-fit: contain;
}

<div>

  <h2>object-fit: contain(not work)</h2>
  <div class="contain-parent">
    <div class="contain1"></div>
  </div>

<div class="contain-parent">
    <div class="contain2 narrow"></div>
  </div>
</div>

如何在具有div标签的替换元素上重现与object-fit: contain相同的行为，     跨度标签等等？我想在长宽比不匹配时显示信箱。