I've found a solution to my issue with large images, but I am still struggling with smaller images not fitting well into larger spaces.
Essentially, I created a CMS for a user who required templates with various bootstrap columns as content areas. Currently, he is dragging images into these areas using TinyMCE editors and saving them as HTML that displays on large screens (around 70 inches).
When dragging a huge image (several thousand pixels), it scales down nicely and works fine. However, he is currently attempting to add an image with smaller dimensions, and when displayed on the large screens, it appears very small (due to the smaller size).
Is there a way to adjust this so that smaller images can expand or grow responsively to fit the full column area?
<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%;
height:100%;
margin:0 auto;
}
#leftContent{
display:flex;
justify-content:center;
align-items:center;
overflow: hidden;
height:100%;
}
#leftContent img{
object-fit: contain;
}
.leftContent{
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
}
.leftContent> img{
min-width:100%;
min-height: 100%;
width: auto;
height: auto;
}
#rightContent{
display:flex;
justify-content:center;
align-items:center;
overflow: hidden;
height:100%;
}
#rightContent img{
object-fit: contain;
}
.rightContent{
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
}
.rightContent> img{
min-width:100%;
min-height: 100%;
width: auto;
height: auto;
}
/*END EDITOR RESPONSIVE STYLES*/
.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;
}
.my-container>.middle>* {
}
</style><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid my-container d-flex h-100">
<div class="row top">
<h2>Top Row</h2>
</div>
<div class="row middle" id="middle" style="background-image: url();">
<!-- Half Page Divs -->
<div class="col-lg-6 leftColumn " id="leftColumn" style="align-items: center;">
<div class="leftContent" id="leftContent" style=" margin:auto; ">
<img src="https://via.placeholder.com/715x938 ">
</div>
</div>
<div class="col-lg-6 rightColumn" id="rightColumn">
<div class="rightContent" id="rightContent" >
<img src="https://via.placeholder.com/715x938 ">
</div>
</div>
<!-- End Half Page Divs -->
</div>
<!-- End Row Middle -->
<div class="row bottom">
<h2>Bottom Row</h2>
</div>
</div>