Question

我有一个带有2个div的Jumbotron，一个显示文本，一个显示图像。它在非常小的和大的屏幕上工作正常但图像在中到小的情况下严重溢出。我希望图像缩小以适应或完全消失。

我没有对任何@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-responsive类。

＆＃13;

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

＆＃13;

右侧的左侧图像上的jumbotron文本

1 个答案: