1

ブッシュの周りを叩くのではなく、すぐに出てきて尋ねます：

http://www.platetheslate.com/

この画像ヘッダーを作成するために彼らは何をしましたか? Chrome のプロパティ インスペクターを使用して、JavaScript コードと CSS をすべて削除しましたが、画像はまだ伸びていました。要素内のスタイルは、ウィンドウ サイズによって変化します。イベントリスナーが関係していると思いますが、見つかりません。

誰かが私にこれを説明できますか？ありがとう。

4

4 に答える 4

1

背景画像として配置する場合は、非常に便利なCSS3機能を使用できます。

background-size: cover

この代替アプローチのチュートリアルについては、CSS3background-sizeを使用したフルサイズの背景画像を参照してください。

于 2012-10-31T22:17:28.683 に答える
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 に答える
0

実際、css で複製するのはかなり簡単です。

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

次に例を示します。

http://jsfiddle.net/kZXgW/ - 仕切りを動かしてみて、伸びるのを確認してください。

その後、親にコントロールを追加して、高さを維持したりmax-height、垂直方向に制限する必要がある場合に使用できます。あなたが参照したサイトには本当の策略は見られず、その必要もありません. CSSは、最近ではこれが得意です。

于 2012-10-31T21:24:08.050 に答える