使图像仅占父容器高度的100％

Question

用户在内容编辑器中缩放图像时遇到问题。

如果将较大分辨率的低分辨率图像拖到该全宽div中，则它们会水平和垂直拉伸，并且只能看到图像的中间部分并且有颗粒感。

我正在尝试确保放置在fullContent div中的所有图像都居中，并且仅该div的高度居中，以使宽度相应缩放。基本上试图使整个图像居中，但无论大小如何都可以完全看到

<style type="text/css">
html,
body {
height: 100vh;
width: 100vw;
overflow: hidden;
}

iframe{
height:100% !important;
width:100% !important;
}

.middle p{
max-height:100%;
margin-bottom:0;     
display: flex
}

img {
object-fit: scale-down;
width: 100%; 
margin:0 auto;
}

#fullContent{
display:flex;
justify-content:center;
align-items:center;
overflow: hidden;
}

#fullContent img{
object-fit: contain;
}

.fullContent {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
}

.fullContent > img{
min-width:100%;
min-height: 100%;
width: auto;
height: auto;
}

.my-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
width:100vw;
}

.my-container .top.row, 
.my-container .row.bottom {
flex-shrink: 0;
}

.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
background-color: #778899  ;
color: white;
text-align: center;
}

.my-container>.middle {
flex-grow: 1;
padding:30px;
/*background-image: url('images/bg_green.svg');*/
background-size: cover;
}

</style>

<div class="container-fluid my-container d-flex h-100">
    <div class="row top">
        <div class="col-lg-12">
	        <div class="row" style="background-color: #778899;">
          <h2>top row</h2>
          </div>
        </div>
    </div>

    <div class="row middle" id="middle" style="background-image: url();">

        <div class="col-lg-12" id="fullColumn">
            <div class="fullContent" id="fullContent">
                <p><img src="https://via.placeholder.com/1900x2300"/></p>
            </div>
        </div>
    </div>
    <!-- End Row Middle -->

    <div class="row bottom">
        <div class="col-lg-12">
	        <div class="row" style="background-color: #778899;">
          <h2>bottom row</h2>
          </div>
        </div>
    </div>
</div>