image - 使用 IMG 响应，PNG 只能从大尺寸缩放到正常尺寸，而不是从正常尺寸缩放到小尺寸

Question

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

问题:

Whenever, I upload the png image inside the img tag with the class= "img-fluid" it remains the same size as I scale. Other images seems to work fine, but if I try to upload a bigger image it will become responsive but only scale from very large to normal size, not from normal to small.

我的问题是

使用 img-responsive 类为 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>

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