使图像（或div？）适合引导列的图像

Question

我已经尝试找到解决方案，但还没有机会，所以我想在这里尝试。

我想使图像适合引导栏的图像

<div id="myImage" class="row">

    <div class="col-md-2">
       <p>Some text</p>
    </div>

    <div class=""col-md-10">
       <img src="dummy-img.jpg" />
    </div>

</div>

这是未经编辑的样子：

这就是我想要的样子：

是否可以在不添加100 CSS属性的情况下将图片调整为的大小？

谢谢！

Answer 1

图像的宽度和高度必须为100％。这将确保图像在父容器中自动调整自身大小。如下所示：

<img src="https://dummyimage.com/16:9x1080/" width="100%" height="100%" />

https://jsfiddle.net/4qys3cu1/

Answer 2

首先，您必须检查语法
关于 class =“ col-md-10” 的双列  
假设“ dummy-img.jpg”是您的图片

 <div class=""col-md-10">
       <img src="dummy-img.jpg" />
    </div>

将此CSS设置为类

.bg{
    background-image: url("dummy-img.jpg"); 
    background-repeat: no-repeat;
    background-size: cover;
}   

并添加到您的课程中

<div id="myImage" class="row">

    <div class="col-md-2">
       <p>Some text</p>
    </div>

    <div class="col-md-10 bg">

    </div>

</div>

你应该很好走