基於瀏覽器窗口尺寸自動調整圖像大小

Question

我有一個基本的網頁布局，100％寬度標題和粘性頁腳。 在兩者之間我有一個大圖形。

我希望圖形根據窗口的大小動態調整大小。

我不想使用flash，並且想知道是否有一種簡單的方法可以使用jquery / javascript。

我不是一個jquery / javascript專家，所以我想知道如何處理這個有一個已經做到的組件。

Answer 1

<style>
.wrapper {width:58.536585%; /*960/1640 = .58536585*/ margin:0 auto;}
.resize {width:100%; height:auto;}
</style>    

<div class="wrapper">
  <img class="resize" src="image.jpg" />
</div>

這將調整您的圖像大小以匹配您的容器並保持比例到位。 如果將容器設置為百分比，則所有內容都將縮放。

包裝寬度= 960px除以屏幕寬度= 1640px

如果您希望整個網站都能響應，那么您必須完全按照數學方式進行操作。 把孩子除以它的父母。 希望這可以幫助！

Answer 2

將圖像容器寬度設置為百分比， width:{amount}%; ，然后也以百分比設置圖像的寬度。 這樣，您的圖像容器也會隨着圖像的擴展而擴展，或者至少看起來如此，因為圖像實際上是在容器擴展時擴展的。 您不一定需要將圖像寬度設置為100％，但無論您設置的是相對於容器寬度。

Answer 3

如果您願意依賴CSS3並將圖像顯示為元素中的背景，請考慮使用background-size 。 使用此路線可以在保留其寬高比的同時調整圖像大小。

這是背景大小的快速示例。

如果您使用JS監視窗口大小並相應地調整大小，這當然可以手動完成。 如果您對此路線感興趣，請告訴我們。 如果可能的話，我會提倡使用純CSS解決方案來做一些微不足道的事情，這樣你就不會疏遠JS禁用的用戶。

Answer 4

img.thespecialimage {
  min-height : 100%;
  min-width : 100%;
  max-height : 100%;
  max-width : 100%;
}