Bootstrap列被非常大的图像破坏，试图使它们在列范围内缩放
[英]Bootstrap column being broken by very large images, trying to have them scale within column bounds
问题描述
我仍然对CMS和如何制作此问题感到困惑，以使用户可以将任意大小的图像拖到列/行（引导程序）中，并且可以进行响应缩放以适合。
首先，这不是针对网站的，而是针对CMS的，用户可以在其中创建将在数字显示器上显示的静态页面，因此根本不需要滚动。 顶行和底行都有横幅（页眉）和股票行情指示器/页脚，然后中间行有放置图像的主列。 因此，无论如何，拖动到该区域的图像都需要缩放以适合它，以便图像保留在保留在页眉和页脚之间的列区域中。
目前，我可以将适当大小的图像拖入其中，但它的位置还不错，但是如果我在其中放置一个巨大的图像，则它会完全打断中间行/列，并且还会超出页脚，而不是缩小以适合显示。 在适应范围内时，它应该尽可能地响应。 这两个示例：
大的占位符图像破坏了列
因此，在图像中，红色区域是图像损坏的相关引导行/行。 第二张图片显示了一个2000x2000的占位符，它超出了该区域，并超出了带有行进器的底行。 在两个图像中，深灰色条分别是第一行和第二行。
同样，无论用户将什么尺寸的图像拖到该区域并保存，无论其显示在什么显示上，都应始终显示顶部和底部的行，并在其中的一列显示比例缩放的图像。
我的代码如下
我该如何纠正这一点，以使我不必担心用户将大量图像拖到某个区域中，并且一旦保存就无法正确显示？
<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
如果您正在使用引导程序，那么它很容易
<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
这是模板，您可以根据需要使用和编辑
<!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>
带有堆叠图像的Bootstrap列：需要具有相同的列高
[英]Bootstrap columns with stacked images: need to have same column height
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.