全屏標題圖片

Question

我不會跳動，而是直接問：

http://www.platetheslate.com/

他們做了什么制作此圖像標題？ 我進入了chrome的屬性檢查器，並刪除了所有的javascript代碼和css，並且圖像仍在拉伸。 元素內部的樣式隨窗口大小而變化。 我認為其中涉及一個事件偵聽器，但找不到。

誰可以給我解釋一下這個？ 謝謝。

Answer 1

如果您將其放置為背景圖像，則可以使用非常方便的CSS3功能

background-size: cover

有關此替代方法的教程，請參見使用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代碼。