Question

我已经解决了有关大图像的问题，但是在将较小的图像放入较大的空间时仍然存在问题。

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

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

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

<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>

Answer 1

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

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

Bootstrap列内容图像响应度

1 个答案: