用户在内容编辑器中缩放图像时遇到问题。
如果将较大分辨率的低分辨率图像拖到该全宽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>