Bootstrap column being broken by very large images, trying to have them scale within column bounds
Question
I'm still so stuck on this issue with my CMS and how to make it so that a user can drag an image of any size into a column/row (bootstrap) and it will responsively scale to fit.
First of all, this isn't for a website but it's a CMS where users create static pages that will show on digital displays so there is no scrolling at all. There is a banner (header) and a ticker/footer as the top and bottom rows, then the middle row has the main column where the images will sit. So no matter what, the images dragged into that area need to scale to fit so that the image remains in the column area which remains between the header and footer.
Currently, I can drag an image of reasonable size in and it sits fine but if I put a huge image in there it totally breaks the middle row/column AND breaks past the footer as well, as opposed to scaling down to fit. it should be responsive as much as possible while fitting in the bounds. Examples of those two:
Large placeholder image breaking the column
So in the images, the red area is the bootstrap column/row in question that the image is breaking. The 2nd image shows a 2000x2000 placeholder breaking out of the area and beyond the bottom row with the ticker. IN both images, the dark grey bars are the top and bottom rows.
Again, no matter what size image the user drags into this area and saves, regardless of what display it shows on it should always show the top and bottom rows, with a column in the middle of them with a scaled image.
My code is below
How exactly can I rectify this so that I don't have to worry about users dragging massive images into an area and they won't display properly once saved?
<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%; } img{ max-width: 100%; height: auto; } .fullContent > img{ max-width: 100%; height: auto; } .topLeftContent > img{ max-width: 100%; height: auto; } .bottomLeftContent > img{ max-width: 100%; height: auto; } .rightContent > img{ max-width: 100%; height: auto; } .leftContent > img{ max-width: 100%; height: auto; } .topRightContent > img{ max-width: 100%; height: auto; } .bottomRightContent > img{ max-width: 100%; height: auto; } .modal-lg { max-width: 80% !important; } .my-container { display: flex; flex-direction: column; height: 100vh; width:100%; } .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/bg6.jpg'); background-size: cover; } </style> <div class="row top"> <div class="row"> <div class="col-lg-12" style="background-color:grey"> <div class="row" style="background-color: #929292;"> TOP </div> </div> </div> </div> <div style="text-align: center; margin-top: 15px;"> <p>(Content must fit within bounds of dotted border)</p> </div> <div class="row middle" id="background"> <form><input type="hidden" name="panel" value="background"></form> <div class="col-lg-12 fullWidth" id="full"> <form><input type="hidden" name="panelFull" value="full"></form> <div class="fullContent" style="background-color: red; height: 100%; border: dotted 1px black;"> <img src="https://via.placeholder.com/2000"> </div> </div> </div> <div class="row bottom"> <div class="col-lg-12" style="background-color:grey"> <div class="marquee"><h2>Ticker</h2></div> </div> </div>
2 answers
solution1
0 2019-01-13 14:36:27
if you are using bootstrap, its so easy
<div class="row">
<div class="col-12">
<img class="img-fluid" src="YOUR_IMG_SRC">
</div>
</div>
solution2
0 2019-01-13 19:12:29
Here is the template, you can use and edit as per your requirements
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <style type="text/css"> body{background-color: #e8eef0;} </style> <title>Main</title> </head> <body> <header class="bg-light"> <div class="container"> <h3 class="text-center py-3">Header Section</h3> </div> </header> <div class="row w-100"> <div class="container"> <div class="border border-danger p-5"> <h6 class="text-center">Main Image Section</h6> </div> </div> </div> <footer class="bg-dark"> <div class="container"> <h5 class="text-center py-3 text-white">Footer Section</h5> </div> </footer> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <!-- CDN Link for jquery --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <!-- CDN Link for popperjs --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <!-- CDN Link for Bootstrapjs --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.