Q:

Fit image to paragraph width

Let's say I have the following css
.text{
    position:absolute;
    padding: 0 25px;
    background: rgba(255,255,255,.6);
}

And following html
<div class = "row">
    <div class = "col-md-6">
        <div class = "text">
            <h3>Title 1</h3>
            <p>
                Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
            </p>
        </div>
        <img src = "https://i.pinimg.com/736x/51/d6/e3/51d6e3dcccd3bdac300202a5a3e99de0--pretty-cats-beautiful-cats.jpg">
    </div>
    <div class = "col-md-6">
        <div class = "text">
            <h3>Title 2</h3>
            <p>
                Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
            </p>
        </div>
        <img src = "https://i.pinimg.com/736x/51/d6/e3/51d6e3dcccd3bdac300202a5a3e99de0--pretty-cats-beautiful-cats.jpg">
    </div>
</div>

How would I get the image to shrink or stretch to fit the width of the whole paragraph, and the height to remain centered on the image.
As an example
If image was 600 x 600 and paragraph took 300 x 150 pixels then the image would shrink down to 300 x 300 and the area that would be displayed would be starting at position (0, 50) and would be size of (300, 150).
I know that I haven't provided any example of what I tried, but if you can at least point me in right direction I would be ever so grateful.

A:

You can use background-image with url of your image and background-size set as "cover".
I think that (jsfiddle) should be what you are looking for:
.background-img-cat {
  background-image:url('https://i.pinimg.com/736x/51/d6/e3/51d6e3dcccd3bdac300202a5a3e99de0--pretty-cats-beautiful-cats.jpg');
  background-size:cover;
}

<div class="row">
    <div class="col-md-6 background-img-cat">
        <div class="text">
            <h3>Title 1</h3>
            <p>
                Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
            </p>
        </div>
    </div>
    <div class="col-md-6 background-img-cat">
        <div class="text">
            <h3>Title 2</h3>
            <p>
                Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
                Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
                Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
            </p>
        </div>
    </div>
</div>

