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.