Отзывчивость изображения содержимого столбца начальной загрузки - PullRequest
Новая
       9

Отзывчивость изображения содержимого столбца начальной загрузки

0 голосов
/ 08 февраля 2019

Я в значительной степени решил мою проблему с большими изображениями, но у меня все еще есть проблемы с меньшими изображениями, помещающимися в большее пространство.

По сути, я создал 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>

1 Ответ

0 голосов
/ 08 февраля 2019

Не уверен, что вы пытаетесь достичь на своем примере, потому что это выглядит как хороший макет.Но вы можете использовать класс img-fluid.Это сделает масштаб изображения с родительским элементом. 

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