Struggling with a challenge in my CMS - figuring out how to allow users to drag images of any size into a bootstrap column/row and have them responsively scale to fit. The goal is to ensure that these images stay within the designated area between a header and a footer on static pages displayed on digital screens.
This task isn't related to web design, rather it involves creating content for digital displays. There's a fixed layout with a banner/header at the top, a ticker/footer at the bottom, and a main column in the middle where images should be placed. Regardless of image size, they need to resize proportionally to fit within this constrained space defined by the header and footer.
Currently facing an issue where smaller images display fine, but larger ones overflow the middle column, breaking the layout and extending past the footer. The objective is to have all images scale down elegantly while staying within the designated boundaries. Examples:
https://i.sstatic.net/lw2HQ.png
An oversized placeholder image disrupting the column https://i.sstatic.net/uSOii.png
In both cases, the red region represents the problematic bootstrap row/column where the image overflows. The second image demonstrates a 2000x2000 placeholder image spilling out of the defined area and beyond the ticker at the bottom. The dark grey bars denote the fixed header and footer sections.
The end goal is to ensure that irrespective of the image size dragged into the designated area, the display always shows the top and bottom rows with a properly scaled image fitting within the middle column.
Below you'll find my code snippet. How can I address this issue so that users can freely add images without worrying about incorrect display formatting?
<style type="text/css">
@import "style.css";
html,
body {
height: 100%;
width:100%;
overflow: hidden;
}
.middle iframe{
height:100% !important;
width:100% !important;
}
.middle p{
max-height:100%;
}
...