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

Question

我正在使用名为＆＃39; slick＆＃39;的jquery插件整理幻灯片演示文稿。 （http://kenwheeler.github.io/slick/）使用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

尝试在.hover-box{ position:absolute; } 选择器中添加属性width：

img

DEMO：http://jsfiddle.net/ws4ty6wo/

Answer 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插件

Answer 3

您可以通过CSS设置任何图像的宽度和高度。如果仅设置宽度或仅设置高度，则会缩放另一个尺寸以保持宽高比。

在css中，你可以这样做：

#slider img {
    width: 600px;
}