Make an image inside a div act like a background image cover

Question

Trying to have an inline image auto crop inside a div to simulate a background image. I tried using absolute position with a size larger than 100% but when you resize it works for the height one time and then breaks for the width another. I am assuming the square shape doesn't help any. Do you have any suggestions on how to resolve this result?

Is JavaScript the best way to make this work?

body {
  background: #000;
}
.container {
  background: #ccc;
}
.row {
  border: 1px solid #fff;
}
.col-md-6 {
  border: 1px solid red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">

<div class="container">

  <div class="row">
    <div class="col-md-6">
      <img src="http://dummyimage.com/600x500/500/fff" class="img-responsive" />
    </div>
    <!-- /.col-md-6 -->
    <div class="col-md-6">
      <h2>Heading</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis officia animi consectetur obcaecati cum harum aliquam qui nisi aliquid sint. Nobis voluptas sequi voluptatem soluta ex sed nisi, sapiente dicta!</p>
    </div>
    <!-- /.col-md-6 -->
  </div>
  <!-- /.row -->

</div>

Answer 1

I've just had a play with your CodePen code.

This might help/be what you want:

HTML:

<div class="container">
   <div class="row">
      <div class="col-md-6 background-cover-image">
          <img src="http://dummyimage.com/600x500/500/fff" class="img-responsive" style="opacity: 0;" />
      </div>
      <!-- /.col-md-6 -->
      <div class="col-md-6">
      <h2>Heading</h2>

      <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Officiis officia animi consectetur obcaecati cum harum aliquam qui nisi aliquid sint.
          Nobis voluptas sequi voluptatem soluta ex sed nisi, sapiente dicta!</p>
      </div>
      <!-- Apply clearfix to stop other content floating up over -->
      <i class="clearfix" aria-hidden="true"></i>
      <!-- /.col-md-6 -->
   </div>
   <!-- /.row -->
</div>

CSS:

body {background:#000;}
.container {background:#ccc;}
.row {border:1px solid #fff;}
.col-md-6 {border:1px solid red;} // All of these are as before :)

.background-cover-image {
   background-image: url('http://dummyimage.com/600x500/500/fff');
   background-size: cover;
   background-position: center;
}

The secret here, is that the original image is still there (with its opacity set to 0), so it's still "there", and gives the div some height. Please do not use in-line styles, like I have; move them to a CSS class - I've just done it for the example!.

It works fine for me - however you will need to decide when the background image div (or whatever you'd like to call it) positions itself above the other content.

Note the use of the clearfix class in the <i> tag, just so that the content beneath doesn't float up and into this lot. You might also want to use the clearfix in other divs - very useful class! :)

Any questions, just ask.

Hope this helps! :)