html - 使用 Bootstrap ，包含较大的图像以放置在较小的静态 div 中

Question

我的问题主要出在中间一行的图像响应上。

我正在使用 bootstrap 4，我尝试使用不同的类，例如 img-fluid，实际上我在样式部分的 img 对象中有这些规则。

我无法对图像类进行硬编码，因为这不是用于网站，而是用于显示页面。用户将图像拖到一个区域(最终显示在我的行中间类中，带有 #fullColumn)所以这是一个静态页面显示。此外，图像是通过 TinyMCE 保存的，所以它们总是被包裹在

标签

行顶部区域是标题，始终位于页面顶部，而我的行底部区域始终贴在页面底部，这正是我想要的。然而，我的 #fullColumn 区域似乎总是保持在两者之间，就像我想要的那样，但如果该区域有一个巨大的图像，那么它会突破行顶部和/或行底部并且完全在 #fullColumn 之外。如果我检查它，#fullColumn 仍然位于行顶部和行底部之间，但图像完全不在页面上。

用户在创建页面时在计算机上查看它，因此他们需要查看它是否适合该区域，但它最终会显示在 55-70 英寸的数字显示器上，因此在这两种情况下我都需要任何和所有图像在 #fullColumn 区域中，只是居中并相应地缩放。如果用户将 2000x2000 像素的图像放入该区域，我需要它在他们的计算机或在显示屏上。

我怎样才能确保任何和所有图像都足够缩小并居中在我的中间区域？

        html,
        body {
          height: 100vh;
          width: 100vw;
          overflow: hidden;
        }

        iframe{
          height:100% !important;
          width:100% !important;
        }

        .middle p{
          max-height:100%;
        }

        img {
          max-width: 100%; 
          height:auto;
          margin:0 auto;
        }
        #fullContent{
          display:flex;
          justify-content:center;
          align-items:center;
        }

        .fullContent > img{
          max-width: 100%;
          height: auto;
        }

        #fullContent> img{
            max-width: 100%;
            height: auto;
        }

        .my-container {
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 100vh;
          width:100vw;
        }

        .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-size: cover;
        }
  

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


	<div class="container-fluid my-container d-flex h-100">
		<div class="row top">
		    <div class="row">
				<div class="col-lg-12">
					<div class="row" style="background-color: #929292;">
						<h3>Top Row</h3>
					</div>
				</div>
			</div>
		</div>

		<div class="row middle" id="middle" style="background-image: url();">
		    <div class="col-lg-12" id="fullColumn">
		        <div class="fullContent" id="fullContent" style="height: 100%; ">
                  <p>
                    <img src="https://via.placeholder.com/2000">
                  <p>
		        </div>
		    </div>
		</div>

		<div class="row bottom">
			<div class="col-lg-12">
			    <div class="row"><h2 style="margin: 40px;">Bottom Row</h2></div>
			</div>
		</div>
	</div>

Answer 1

我不得不对您的标记进行一些更改(您需要更加注意 Bootstrap 的网格系统)。
我可能做了一些其他的小改动，但让它起作用的主要原因是:

• 已申请 .d-flex在 <p> 上
• 添加了这个 CSS:

.middle p {
  margin-bottom: 0;
}
#fullContent img {
  object-fit: contain;
}

.my-container .top.row, 
.my-container .row.bottom {
  flex-shrink: 0;
}

html,
body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}


.middle p {
  max-height: 100%;
  margin-bottom: 0;
  display: flex;
}

img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

#fullContent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullContent>img {
  max-width: 100%;
  height: auto;
}

#fullContent img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.my-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

.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-size: cover;
}

.my-container .top.row, 
.my-container .row.bottom {
  flex-shrink: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="container-fluid my-container h-100">
  <div class="row top">
    <div class="col-lg-12">
      <h3>Top Row</h3>
    </div>
  </div>

  <div class="row middle" id="middle">
    <div class="col-lg-12" id="fullColumn">
      <div class="fullContent" id="fullContent" style="height: 100%;">
        <p>
          <img src="https://via.placeholder.com/4000x3500">
        </p>
      </div>
    </div>
  </div>

  <div class="row bottom">
    <div class="col-lg-12">
      <h2 style="margin: 40px;">Bottom Row</h2>
    </div>
  </div>
</div>