Bootstrap 列内容图像响应能力答案

【问题标题】：Bootstrap column content image responsivenessBootstrap 列内容图像响应能力
【发布时间】：2019-07-02 19:17:53
【问题描述】：

我已经基本解决了关于大图像的问题，但我仍然无法将较小的图像放入更大的空间。

基本上，我为需要具有不同引导列的模板作为内容区域的用户制作了一个 CMS。目前，他正在将图像拖到这些区域，由 TinyMCE 编辑器驱动，并将它们保存为 HTML 以显示在大屏幕（大约 70 英寸）上

因此，拖动一个巨大的图像（几千像素）似乎可以按比例缩小并且效果很好，但他目前正在尝试添加以下尺寸的图像，当它显示在大屏幕上时，它在屏幕上的尺寸非常小（显然由于尺寸较小）

有没有办法对此进行修改，以便较小的图像可以增长/扩展以适应整个列区域？

<style type="text/css">
      html,
      body {
      height: 100vh;
      width: 100vw;
      overflow: hidden;
      }

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

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

      img {
      object-fit: scale-down;
      width: 100%; 
      height:100%;
      margin:0 auto;
      }
      #leftContent{
        display:flex;
        justify-content:center;
        align-items:center;
        overflow: hidden;
        height:100%;
      }
      #leftContent img{
          object-fit: contain;
      }
      .leftContent{
        max-width: 100%;
        max-height: 100%;
        height: auto;
        width: auto;
      }
      .leftContent> img{
        min-width:100%;
        min-height: 100%;
        width: auto;
        height: auto;
      }
      #rightContent{
        display:flex;
        justify-content:center;
        align-items:center;
        overflow: hidden;
        height:100%;
      }
      #rightContent img{
          object-fit: contain;
      }
      .rightContent{
        max-width: 100%;
        max-height: 100%;
        height: auto;
        width: auto;
      }
      .rightContent> img{
        min-width:100%;
        min-height: 100%;
        width: auto;
        height: auto;
      }
      /*END EDITOR RESPONSIVE STYLES*/



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

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

      .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/bg_green.svg');*/
      background-size: cover;
      }

      .my-container>.middle>* {
      }

      </style>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>

<div class="container-fluid my-container d-flex h-100">
        <div class="row top">
          <h2>Top Row</h2>
        </div>

        <div class="row middle" id="middle" style="background-image: url();">
          <!-- Half Page Divs -->
          <div class="col-lg-6 leftColumn " id="leftColumn" style="align-items: center;">  
              <div class="leftContent" id="leftContent" style=" margin:auto; ">  
                <img src="https://via.placeholder.com/715x938 "> 
              </div>
          </div>
          <div class="col-lg-6 rightColumn" id="rightColumn"> 
            <div class="rightContent" id="rightContent" >
                <img src="https://via.placeholder.com/715x938 "> 
            </div>
          </div>
          <!-- End Half Page Divs -->
        </div>
        <!-- End Row Middle -->

        <div class="row bottom">
            <h2>Bottom Row</h2>
        </div>
      </div>

【问题讨论】：

标签： html css bootstrap-4 responsive

【解决方案1】：

不确定您要从示例中实现什么，因为它看起来像一个不错的布局。但是，您可以使用的类是img-fluid。这将使图像与父元素一起缩放。

<img src="..." class="img-fluid" alt="Responsive image">

【讨论】：