自动调整图像大小以适合容器

Question

如何自动调整图像大小以使其适合容器？我想有一个容器的空白背景。目前它是这样的：

<div class="row">
    <div class="col-md-3">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="row">
                    <img src ="haha.png"/>
                </div>
            </div>
        </div>
    </div>
</div>

我想有一个容器，我可以将图像放入其中，自动调整图像大小。

Answer 1

尝试将“img-responsive”类添加到您的图片代码中。

<img class="img-responsive" src ="haha.png" alt = "Alternative Text" />

  

Bootstrap 3中的图像可以通过添加响应友好   .img响应类的。这适用于max-width：100％;, height：   汽车;和显示：块;到图像，以便它很好地缩放到   父元素。

http://getbootstrap.com/css/#images

Answer 2

您应该在样式表中写下该代码。

<style>
  .row{
    width: 100%;
    height: 100%;
    position: relative; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
   }
</style>