html - 大图像仍然会破坏具有最大宽度和高度的引导列

Question

我有 Bootstrap 模板，用户可以使用这些模板来创建图像和文本的显示，并且我之前将 max-width:100% 和 height:auto 添加到我的 img css 中，我认为它已修复某些大图像。

但是，如果我向其中添加一个巨大的图像，它仍然会破坏容器。

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

我做错了什么？

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

尝试对 bootstrap 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>