大图像仍会中断具有最大宽度和高度的引导程序列

Question

我有引导程序模板，用户可以使用它们来创建图像和文本的显示，并且我之前在我的img css中添加了max-width：100％和height：auto，我认为它已针对某些大图像修复

但是，如果我在其中添加大图像，它仍然会破坏容器。

我正在努力使用户可以将图像拖到该容器中，无论如何图像都将适合。

我在做什么错了？

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

<div class="container-fluid my-container d-flex h-100">
   <div class="row middle" id="middle" style="background-image: url();">
    <div class="col-lg-6"  id="leftColumnQtr">
      <div class="row" style="height:50%; padding-bottom: 15px;">
        <div class="col-lg-12" style="height:100%;">
            <div  id="topLeftContent" style=" height: 100%; ">
            </div>
        </div>
      </div>
      <div class="row" style="height:50%; padding-top: 15px;">
        <div class="col-lg-12" style="height:100%;">
            <div id="bottomLeftContent" style=" height: 100%;">
               <img src="https://via.placeholder.com/1500x700">
            </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6" id="rightColumnQtrHalf" >
        <div id="rightQtrContent" style=" height: 100%; ">
        </div>
    </div>
   </div>
</div>

图片

Answer 1

尝试对引导程序4中的所有图像使用img-fluid。可以对列使用display:flex进行均等对齐。

.row.middle {
  background-image: url('https://drinknooma.com/wp-content/uploads/2016/12/placeholder-1170x731.jpg');
  background-size: cover;
  background-position: center;
}

.row.eqcol div[class^="col-"] {
    display:flex;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid my-container">
   <div class="row eqcol middle" id="middle">
    <div class="col-lg-6" id="leftColumnQtr">
      <div class="row">
        <div class="col-lg-12">
            <div id="topLeftContent">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
				
            </div>
        </div>
        <div class="col-lg-12">
            <div id="bottomLeftContent">
               <img class="img-fluid" src="https://via.placeholder.com/1500x700">
            </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6" id="rightColumnQtrHalf" >
        <div id="rightQtrContent">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        </div>
    </div>
   </div>
</div>