PNG 仅通过 IMG 响应从大到正常大小缩放，而不是从正常到小

Question

我在 bootstrap3 上使用类 img 响应缩放具有透明背景的 png 图像时遇到问题，该背景宽度为 279 像素，高度为 432 像素。

问题：

每当我上传带有 class= 的 img 标签内的 png 图像时 "img-fluid"它保持与我缩放相同的大小。其他图像似乎 工作正常，但如果我尝试上传更大的图像，它会变成 响应式，但只能从非常大扩展到正常大小，而不是从 正常到小。

我的问题是

使用类 img 响应优化 Bootstrap-3 的 PNG 图像的最佳方法是什么？

.HTML：

<div class="poster">
    <div class="container">
        <div class="intro-text">
            <div class="intro-heading">Welcome <img href="../html/indexfinal.html" class="bigv" src="../images/logos/bigvlogo.png" alt=""/> <img href="../html/indexfinal.html" class="midv" src="../images/logos/midvlogo.png" alt=""/> </div>
            <div class="intro-lead-in">Hi yall'</div>       
            <div class="container-fluid">
            <img class="mascot" src="../images/mascot/wave.png">
            </div>
             <a style="float:left" id="guestsignup"></a>
        </div>
    </div>
</div>

Answer 1

它会

起作用。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <img src="http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg" class="img-responsive" alt="Cinque Terre"> 
    </div>
  </div>
</div>

调整屏幕大小以查看差异。

Answer 2

您可以将img-responsive类添加到现有代码中：

<img class="mascot img-responsive" src="http://farm5.static.flickr.com/4017/4717107886_dcc1270a65_b.jpg">

希望这就是你要找的。