全屏幕標題圖片

Question

而不是拐彎抹角，我就直截了當地問：

http://www.platetheslate.com/

他們做了什麼，使這個圖像頭？我和chrome的財產檢查員一起去除了所有的javascript代碼以及css，並且圖像仍在延伸。元素內部的樣式隨窗口大小而變化。我認爲有一個事件監聽器參與其中，但我找不到它。

有人可以向我解釋這個嗎？謝謝。

Answer 1

，如果您把它作爲一個背景圖片，你可以使用非常方便的CSS3功能

background-size: cover 

請參閱Fullsize Background Image with CSS3 background-size瞭解這種替代方法的教程。

Answer 2

這其實很容易在CSS複製：

​img { min-width: 100%; }​ 

下面是一個例子：

http://jsfiddle.net/kZXgW/ - 嘗試移動分隔，看看它舒展。

然後，您可以將控件添加到父級來維護高度，或者如果需要垂直限制它，則可以使用max-height。我沒有在您引用的網站上看到任何真正的欺騙，我看不到需要。現在CSS在這方面很不錯。

Answer 3

實際畫面的寬度是硬編碼：

  <h1 class="title-text"> PLATE THE SLATE No. 6 <em>American  Cheese</em> </h1> 
      <div id="h-image"> <img src="http://www.platetheslate.com/wp-content/uploads/2012/10/mfb-american-cheese.jpg" width="1100" height="650" alt="Image" /> </div> 

的尺寸變化是：

function resizeText() { 

      var topText = $(".title-text"); 

      var bottomText = $(".title-text em"); 

      bottomText.css({ 

       "font-size":getBottomSize(), 

       "line-height":getBottomLineHeight() 

      }); 

Answer 4

這是創建此功能的.js文件。 http://www.platetheslate.com/wp-content/themes/twentyeleven/js/jquery.main.js

它只是一些簡單的jQuery代碼。