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>

如何缩小或拉伸图像以适应整个段落的宽度，以及保持图像居中的高度。

举个例子如果图像为600 x 600并且段落为300 x 150像素，则图像将缩小至300 x 300，并且将显示的区域将从位置（0,50）开始并且将是（300,150）的大小

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

Answer 1

您可以将background-image与图片的网址一起使用，background-size设置为“封面”。我认为（jsfiddle）应该是你想要的：

 let input = document.querySelector(".input");
 let ul = document.querySelector("ul");    
 input.onchange=function(){
    let addNew = document.createElement("li");
    addNew.innerHTML=this.value;
    this.value="";
    ul.appendChild(addNew);
 }

使图像适合段落宽度

1 个答案: