如何使用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> 

I am getting proper image fitting to text.. after i start resizing my image start reducing and there will be gap like the below image. i don't want it to happen for all the devices. my entire site is in this manner only. i don't want that extra background showing at the right side of the image.can anybody help me to solve this problem.

Answer 1

you can create row inside col-md-6 and define column that you want like

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

you can print text first and image in second and change col length with your need. I hope this is what you need if not please try to clarify your question.

Answer 2

Please check this

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