動態圖像大小調整

我正在創建一組跨越我網站上頁面寬度的圖像。通常情況下，這樣可以，但是，由於我允許頁面動態調整大小，因此圖像伸展（或壓縮）並且變得有點失真。動態圖像大小調整

有沒有人知道一種方式來本質上，只是創建窗口的圖像調整大小，而圖像靜坐在下面？

如果你想要我的問題的例子，你可以去here。

來源

2013-03-01 aprohl5

嘗試設置你的圖片，我假設在一個包裝，以IMG {顯示：塊;寬度：15％;身高：自動;作爲一個起點？ – sheriffderek 2013-03-01 07:38:39

我只是調整您的圖像與批量調整大小程序。任何動態調整大小都會使速度或圖像質量受損。如果你下載，重新調整大小，上傳，你將永遠不必擔心。

來源

2013-03-01 03:30:07 irregularexpressions

如果文件非常雜亂，我想這可能會很雜亂... – irregularexpressions 2013-03-01 03:30:38

你能詳細說明一下嗎？ – aprohl5 2013-03-01 03:31:10

如果您可以輕鬆下載所有圖像文件，則可以使用程序通過{file-name} - {pixel-size}。{file-extension}中的附加文件名來調整它們的大小。我的同事爲我這樣做，所以我不知道他使用的程序，但現在如果可以的話，我會發現。 – irregularexpressions 2013-03-01 03:32:10

試試看。很難說出你想要發生什麼......我的意思是，在小屏幕上它不會超酷。我會建議參與一些媒體查詢，但這應該會向您展示您的方法的第一步。 http://jsfiddle.net/sheriffderek/NvFwe/我希望它有幫助。

HTML

<div class="wrapper"> 
    <img alt="image description" src="http://placehold.it/350x300"> 
    <img alt="image description" src="http://placehold.it/350x300"> 
    <img alt="image description" src="http://placehold.it/350x300"> 
    <img alt="image description" src="http://placehold.it/350x300"> 
    <img alt="image description" src="http://placehold.it/350x300"> 
</div>

CSS

.wrapper { 
    width: 100%; 
    float: left; 
    background-color: #f06; 
} 

.wrapper img { 
    display: block; 
    float: left; 
    width: 15%; 
    height: auto; 
    margin-right: 3%; 
}

來源

2013-03-01 07:46:32 sheriffderek

我其實不想調整圖像大小。靜態圖像（取決於媒體查詢塊），頂部包裝。這通過窗口到圖像。窗口然後將調整大小。 – aprohl5 2013-03-01 14:44:59

動態圖像大小調整

回答

相關問題