html - Bootstrap 列被非常大的图像破坏，试图让它们在列边界内缩放

Question

我仍然对我的 CMS 的这个问题以及如何使用户可以将任意大小的图像拖动到列/行( Bootstrap )并且它会响应地缩放以适应这一问题感到非常困惑。

首先，这不是一个网站，而是一个 CMS，用户可以在其中创建将显示在数字显示器上的静态页面，因此根本没有滚动。顶行和底行有一个横幅(页眉)和一个代码/页脚，然后中间行有图像所在的主列。因此，无论如何，拖入该区域的图像需要缩放以适合，以便图像保留在页眉和页脚之间的列区域中。

目前，我可以拖入一个合理大小的图像，它的位置很好，但如果我将一个巨大的图像放在那里，它会完全破坏中间的行/列，并且也会破坏页脚，而不是缩小以适合.它应该在适应边界的同时尽可能地做出响应。这两个的例子:

打破列的大占位符图像

所以在图像中，红色区域是图像损坏的有问题的 Bootstrap 列/行。第二张图片显示了一个 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>

Answer 1

如果你正在使用bootstrap，那就太简单了

<div class="row">
    <div class="col-12">
         <img class="img-fluid" src="YOUR_IMG_SRC">
    </div>
</div>