jumbotron текст слева изображение справа

Question

У меня есть Jumbotron с 2 divs, один для отображения текста и один для изображения. Он отлично работает на очень маленьком и большом экране, но изображение сильно переполняется от среднего до малого. Я бы хотел, чтобы изображение либо сжалось, либо полностью исчезло.

Я не внес никаких изменений ни в одном @media.

Вот код, у меня есть:

<div class="jumbotron"> 
<div class="container"> 
    <div class="row"> 
     <div class=" col-md-6 col-sm-12" > 
      <h1>Dive Gweedore </h1> 
      <p>A place of wonder and crystal clear water</p> 
      <p><a class="btn btn-primary btn-sm" role="button"> 
    Durability</a> 
    <a class="btn btn-primary btn-sm " role="button"> 
    Strength</a> 
    <a class="btn btn-primary btn-sm" role="button"> 
    Brilliance</a> 
    </p> 
     </div> 
     <div class=" col-md-6"> 
     <img class="showcase-image" src="http://localhost/shop/image/cache/catalog/hand.png"> 
     </div>   
    </div> 

    </div> 
</div> 

Answer 1

Вставка Bootstrap IMG реагирующих класс в изображении.

.img-responsive { 
 
    display: block; 
 
    height: auto; 
 
    max-width: 100%; 
 
}