Подогнать изображение (или 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>

Тебе должно быть хорошо идти