Как применить подгонку объекта: содержать также к 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>

Как я могу воспроизвести то же поведение, что и object-fit: contain для замещающих элементов с тегами div, тегами span и т. Д.?Я хочу отобразить почтовый ящик, когда соотношение сторон не совпадает.