html - 使图像适合段落宽度

Question

假设我有以下 CSS

.text{
    position:absolute;
    padding: 0 25px;
    background: rgba(255,255,255,.6);
}

和下面的 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>

我如何让图像缩小或拉伸(stretch)以适合整个段落的宽度，以及如何使高度保持在图像的中心。

举个例子如果图像为 600 x 600，段落为 300 x 150 像素，则图像将缩小到 300 x 300，显示的区域将从位置 (0, 50) 开始，大小为 (300, 150) .

我知道我没有提供任何我尝试过的例子，但如果你至少能给我指出正确的方向，我将非常感激。

Answer 1

您可以使用 background-image带有图片的网址和 background-size设置为“封面”。我认为 ( jsfiddle) 应该是您要查找的内容:

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