如何縮放圖像爲一致的圖像尺寸

enter image description here 如何縮放圖像爲一致的圖像尺寸

我放在一起使用所謂的「油滑」一個jQuery插件（http://kenwheeler.github.io/slick/）使用Django和引導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>

將最後一張幻燈片後，我注意到，前進後退按鈕被推一路下跌（請見截圖）。我猜這與幻燈片的大小有關。我剛剛添加。

我不是前端人物，所以這可能是一個基本問題，但是具有一致大小的幻燈片的最佳方式是什麼？如果原始尺寸不同，它們是否可以自動縮放以適合預定的尺寸。我在做一些這樣的手也這樣我就可以在理論上我可以將它們設置爲特定的大小，如果這將有助於

來源

2015-04-27 user61629

嘗試在img選擇添加屬性width：

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

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

來源

2015-04-27 15:59:33 oscarvady

這樣做將是動態調整的映像的服務器，Python和Django的我敢肯定有一百萬的方式來做到這一點的最好辦法。
在瀏覽器中執行此操作的最簡單方法是，要讓用戶使用現代（IE 9以上）瀏覽器，則要設置固定大小的圖像環繞div，圖像高度並使用在 CSS背景大小屬性，它可以讓你不同的方式來填補元素

您還可以設置的CSS height屬性以固定的金額，即

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

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

如果你真的想這樣做它以編程方式，你可以使用一個JQuery插件像Image Resize

來源

2015-04-27 16:00:49 MaxRocket

您可以通過CSS設置任何圖像的寬度和高度。如果僅設置寬度或僅設置高度，則會縮放另一個尺寸以保持寬度/高度比。

在CSS中，你可以做這樣的事情：

#slider img { 
    width: 600px; 
}

來源

2015-04-27 16:02:19

如何縮放圖像爲一致的圖像尺寸

回答

相關問題