如何使用2 col-md-6同時適合文本和圖像

Question

 <style> .backgroundcolor1 { background-color: #567892; } </style> 

 <section> <div class="row" align="center"> <div class="col-md-12 backgroundcolor1"> <div class="col-md-6 col-sm-6"> <div class="col-md-10 col-lg-offset-1 "> <br> <img src="assets/images/SPA/Icons/facials.png" class="icons" alt=""><br> <h3>FACIALS</h3> <p align="justify">Have you ever treated to a facial?<br> Facial treatments feel good, offering soothing relaxation, according to Day Spas. Facial massage treatments increase circulation and the flow of blood, and they include a variety of cremes, aromatherapy and oils that moisturize the skin, smell good, and relieve stress as well as encourage peace of mind and contentment</p> </div> </div> <div class="col-md-6 col-sm-6 textbox"> <img src="assets/images/SPA/facial.jpg" style="height: 100%; width: 100%; object-fit: contain;opacity:0.9;padding:0;margin:0; " alt=""> <figcaption><br><br><br> <h3>Facials</h3> </figcaption> [enter image description here][1] </div> </div> </div> </section> 

我得到的圖像適合文本..開始調整大小后，我的圖像開始縮小，並且會出現如下圖所示的間隙。 我不希望所有設備都發生這種情況。 我的整個網站僅以這種方式。 我不希望在圖像的右側顯示多余的背景。有人可以幫助我解決此問題嗎？

Answer 1

您可以在col-md-6內創建行並定義所需的列

<div class="col-md-6 col-sm-6 textbox">
   <div class="row">
      <div class="col-md-7 col-sm-6">
          <img src="">
      </div>
      <div class="col-md-5 col-sm-6">
          <p>Text goes here.....</p>
          <p>ddescription goes here</p>
      </div>
   </div>
</div>

您可以先打印文本，然后再打印圖像，並根據需要更改列長。 我希望這是您所需要的，如果不需要的話，請嘗試澄清您的問題。

Answer 2

請檢查一下

 .backgroundcolor1 { background-color: #567892; } .back_imag{position:absolute !important; background:url(http://via.placeholder.com/500x400) no-repeat; background-size:cover; background-position:center center; left:0px; top:0px; bottom:0px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> <section class="container"> <div class="row" align="center"> <div class="col-xs-12 backgroundcolor1"> <div class="col-xs-6 col-sm-6"> <div class="col-md-10 col-lg-offset-1 "> <br> <img src="assets/images/SPA/Icons/facials.png" class="icons" alt=""><br> <h3>FACIALS</h3> <p align="justify">Have you ever treated to a facial?<br> Facial treatments feel good, offering soothing relaxation, according to Day Spas. Facial massage treatments increase circulation and the flow of blood, and they include a variety of cremes, aromatherapy and oils that moisturize the skin, smell good, and relieve stress as well as encourage peace of mind and contentment</p> </div> </div> <div class="col-xs-6 col-sm-6 textbox back_imag col-xs-offset-6"> <img src="" class="" alt=""> <figcaption><br><br><br> <h3>Facials</h3> </figcaption> [enter image description here][1] </div> </div> </div> </section>