html - 使图像仅为父容器高度的 100%

Question

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

如果他们将大版本的低分辨率图像拖到这个全宽 div 中，它们会水平和垂直拉伸，并且只能看到图像的中间部分并且是颗粒状的。

我试图确保放置在fullContentdiv 中的任何图像都是居中的，并且只有该 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>

标签： htmlcssbootstrap-4