如何缩放图像以获得一致的图像大小答案

【问题标题】：How to scale images for a consistent image size如何缩放图像以获得一致的图像大小
【发布时间】：2015-07-06 04:04:18
【问题描述】：

我正在使用一个名为“slick”(http://kenwheeler.github.io/slick/) 的 jquery 插件，使用 django 和 bootstrap 3 模板制作幻灯片演示。我有一个使用 django 模板的基本轮播，如下所示：

{% load staticfiles %}

  <div class="your-class">
    <div>your content</div>
    <div><IMG src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSj2c33fdt1ugB8VBuE5V37wnmPoxWMknX9JnGycNiH2yr3BpDKVA"></div>

    <div><IMG src="{% static 'img/slides/slide1.jpg' %}"></div>
    <div>your content</div>
  </div>

添加最后一张幻灯片后，我注意到前进后退按钮被向下推（请参见屏幕截图）。我猜这与幻灯片的大小有关。我刚加了。

我不是前端人员，所以这可能是一个基本问题，但拥有一致大小的幻灯片的最佳方法是什么。如果它们的原始尺寸不同，它们是否可以自动缩放以适应预定的尺寸。我也在手工制作其中一些，所以理论上我可以将它们设置为特定的尺寸，如果有帮助的话

【问题讨论】：

标签： jquery css django twitter-bootstrap

【解决方案1】：

尝试在img 选择器中添加属性width：

<div><img width="100%" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSj2c33fdt1ugB8VBuE5V37wnmPoxWMknX9JnGycNiH2yr3BpDKVA"></div>

演示：http://jsfiddle.net/ws4ty6wo/

【讨论】：

【解决方案2】：

最好的方法是动态调整图像大小服务器、python 和 django 我肯定有一百万种方法可以做到这一点。
在浏览器中执行此操作的最简单方法，如果您是将要求用户使用现代（IE 9+）浏览器，是为图像包装 div 设置固定大小，图像高度，并使用 CSS Background Size 属性，它允许您以各种方式填充元素

你也可以将css的height属性设置为一个固定的值，即

 <div class="img-wrap"><img src="..."/></div>

 div.img-wrap {
     overflow:hidden;
     height:100px;
  }
  div.img-wrap img {
     width:auto;
     height: 100px;
  }

如果你真的想以编程方式进行，你可以使用像 Image Resize 这样的 JQuery 插件

【讨论】：

【解决方案3】：

您可以通过 CSS 设置任何图像的宽度和高度。如果仅设置宽度或仅设置高度，它将缩放其他尺寸以保持宽度/高度比。

在 css 中，你可以这样做：

#slider img {
    width: 600px;
}

【讨论】：