PNG 仅使用 IMG-Responsive 从大缩放到正常大小，而不是从正常到小答案

【问题标题】：PNG only scales from large to normal size instead of normal to small with IMG-ResponsivePNG 仅使用 IMG-Responsive 从大缩放到正常大小，而不是从正常到小
【发布时间】：2016-05-14 06:22:20
【问题描述】：

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

问题：

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

我的问题是

使用 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>

【问题讨论】：

您在小提琴中使用了相对路径....这就是为什么图像不存在...添加绝对/完整路径
我认为您最初的问题只是您拼错了“img-responsive”。我刚刚将它添加到小提琴中的图像中，并正确调整了大小。

标签： image css twitter-bootstrap-3 png image-scaling

【解决方案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>

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

【讨论】：

【解决方案2】：

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

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

希望这就是你想要的。

【讨论】：