I am facing an issue with image responsiveness in the middle row of my layout.
Despite using Bootstrap 4 and applying classes like img-fluid, the images in my #fullColumn area do not resize properly. The images are dragged into this area by users and are displayed on a static page below the top and bottom rows.
The header is fixed at the top of the page, while the footer remains at the bottom as intended. However, the #fullColumn section sometimes fails to contain oversized images within its boundaries, causing them to spill out of the designated area.
Since this display is viewed both during creation on a computer and later on large digital screens, all images in the #fullColumn area must be centered and scaled appropriately. Even if a user uploads a high-resolution image, it should fit between the top and bottom rows seamlessly.
To achieve this, I need assistance in ensuring that all images are resized and centered within the middle section. Any suggestions?
https://i.stack.imgur.com/LDl6l.png
html,
body {
height: 100vh;
width: 100vw;
overflow: hidden;
}
iframe{
height:100% !important;
width:100% !important;
}
.middle p{
max-height:100%;
}
img {
max-width: 100%;
height:auto;
margin:0 auto;
}
#fullContent{
display:flex;
justify-content:center;
align-items:center;
}
.fullContent > img{
max-width: 100%;
height: auto;
}
#fullContent> img{
max-width: 100%;
height: auto;
}
.my-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
width:100vw;
}
.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-size: cover;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container-fluid my-container d-flex h-100">
<div class="row top">
<div class="row">
<div class="col-lg-12">
<div class="row" style="background-color: #929292;">
<h3>Top Row</h3>
</div>
</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" style="height: 100%; ">
<p>
<img src="https://via.placeholder.com/2000">
<p>
</div>
</div>
</div>
<div class="row bottom">
<div class="col-lg-12">
<div class="row"><h2 style="margin: 40px;">Bottom Row</h2></div>
</div>
</div>
</div>