隨着窗口大小的變化調整div中的所有圖像

我創建了一個圖像作爲主頁。我使用Photoshop來分割它並將其保存爲一組樣式化的div。通常，當我製作這種性質的網站時，我會創建幾種不同的尺寸，並使用JavaScript來檢測可用的窗口大小並加載相應的頁面。我想加強我的遊戲，做同樣的風格網站，但使用某種形式的jquery重新調整所有圖像的大小，同時限制比例，因爲屏幕變得更小/更大。網站可以有最大的尺寸，變得更小，甚至可能負載最大尺寸取決於可用的屏幕寬度/高度。隨着窗口大小的變化調整div中的所有圖像

現在我發現了一個名爲jquery-imagefit的插件，它在縮放窗口大小變化的圖像方面做得非常好。出於某種原因，當我實現它時，圖像彼此分離，在每張圖像之間產生間隙。

任何人都可以幫助我實現這個網站imagefit。理想情況下，圖像將浮在屏幕的底部，並從那裏增長和縮小。這裏是一個鏈接到頁面：

http://www.uvm.edu/~areid/homesite/div-style/index.html

感謝

凱蒂

來源

2012-11-04 katie bekell

我想我不明白，爲什麼你把圖像切分並放在不同的div中？爲什麼不能有一個響應的背景圖片？ – Lowkase

圖像保持在同一個地方，因爲你在CSS中使用'position：absolute;'@ – twiz

@lokase http://www.uvm.edu/~areid/homesite/index.html這是我最後的產品去 - 我只是希望它能夠縮小/增長 –

正如我上面所建議的那樣，您可以使用CSS浮動來組織圖像並使用百分比來調整它們的大小。

我輸入了一些可以幫助你的代碼。

HTML：

<div class="everything"> 

    <div class="row"> 
     <img src="http://www.uvm.edu/~areid/homesite/div-style/images/01.gif" style="width:100%"> 
    </div> 

    <div class="row"> 
     <img src="http://www.uvm.edu/~areid/homesite/div-style/images/02.gif" style="width:31%"> 
     <img src="http://www.uvm.edu/~areid/homesite/div-style/images/forehead-mouse.gif" style="width:38%"> 
     <img src="http://www.uvm.edu/~areid/homesite/div-style/images/04.gif" style="width:31%"> 
    </div> 

</div>

CSS：

.everything{ 
    width:100%; 
} 

.row{ 
    overflow:hidden; 
} 

.row img{ 
    float:left; 
}

您可以查看它的jsfiddle： http://jsfiddle.net/9MEn7/5/

顯然，這不是我創建了一個完整的解決方案，但它應該得到你開始了。我建議你以更實用的方式剪切圖像，例如將圖像放在同一高度的「行」中。

來源

2012-11-05 00:13:37 twiz

如果我理解你正確儘量不要在圖像標籤應用的寬度和你的DIV的CSS設置：

#divID img { 
    max-width: 100%; 
    max-height: 100%; 
}

來源

2012-11-04 23:05:11

隨着窗口大小的變化調整div中的所有圖像

回答

相關問題