Question

我的问题很大程度上在于中间行中的图像响应能力。

我正在使用引导程序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>

使用引导程序，将较大的图像包含在较小的静态div中

1 个答案: