jquery - 如何缩放图像以获得一致的图像大小

Question

我正在使用名为“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>

添加最后一张幻灯片后，我注意到向前向后按钮被向下推(请参见屏幕截图)。我猜这与幻灯片的大小有关。我刚刚补充道。

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

Answer 1

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

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

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