Bootstrap列被非常大的图像破坏，试图使它们在列范围内缩放
[英]Bootstrap column being broken by very large images, trying to have them scale within column bounds
问题描述
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. 
我仍然对CMS和如何制作此问题感到困惑，以使用户可以将任意大小的图像拖到列/行（引导程序）中，并且可以进行响应缩放以适合。
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. 首先，这不是针对网站的，而是针对CMS的，用户可以在其中创建将在数字显示器上显示的静态页面，因此根本不需要滚动。 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. 第二张图片显示了一个2000x2000的占位符，它超出了该区域，并超出了带有行进器的底行。 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 个解决方案
解决方案1
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>
解决方案2
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.