全屏幕标题图片

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代码。