1

我不会拐弯抹角，而是直接出来问：

http://www.platetheslate.com/

他们做了什么来制作这个图像标题？我使用 chrome 的属性检查器并删除了所有的 javascript 代码和 css，图像仍在拉伸。元素内部的样式随窗口大小而变化。我想有一个事件监听器涉及，但我找不到它。

谁可以给我解释一下这个？谢谢。

4

4 回答 4

1

如果你将它作为背景图片，你可以使用非常方便的 CSS3 功能

background-size: cover

有关此替代方法的教程，请参阅具有 CSS3 背景大小的全尺寸背景图像。

于 2012-10-31T22:17:28.683 回答
0

在 css 中复制实际上很容易：

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

这是一个例子：

http://jsfiddle.net/kZXgW/ - 尝试移动分隔线并看到它伸展。

然后，您可以向父级添加控件以保持高度，或者max-height如果您需要垂直约束它。我在您引用的网站上看不到任何真正的诡计，我也看不出有必要。如今，CSS 在这方面做得很好。

于 2012-10-31T21:24:08.050 回答
0

实际图片的宽度是硬编码的：

            <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()

            });
于 2012-10-31T21:28:52.887 回答
0

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

它只是一些简单的 jQuery 代码。

于 2012-11-01T23:17:41.610 回答