0

Pinterestのスプラッシュ ページを確認してください - ** (アカウントからログアウトしていないか、スプラッシュ ページが表示されないことを確認してください。) 下部にある Macbook の画像。応答性が高く、ブラウザー ウィンドウのサイズに応じて縮小および拡大します。

ばかげた質問...彼らはどうやってそれをするのですか? Twitter Bootstrapを使用してこれを行うにはどうすればよいですか?

4

1 に答える 1

0

<script>ページ上のブロックを見ると、それがどのように行われているかがわかります。基本的には単なるサイズ変更リスナーです。簡略化されたバージョンは次のとおりです。

var htAboveImage = $content.height(),
    naturalImageHt = 450,
    padding = 150,
    minImageHt = 100;

var changeFunc = function() {
    var windowHt = $window.height();
    var imageHt = Math.min(
                      Math.max(windowHt - htAboveImage - padding, minImageHt)
                      naturalImageHt,
                  );
    $image.height(imageHt);
};
changeFunc();
$(window).on("resize", changeFunc);

幅も更新する必要はありません<img>。CSS で 1 つの寸法のみをサイズ変更すると、自動的にそれに比例してサイズが変更されるためです。しかし、Pinterest の完全なコードは、画像の上のコンテンツのパディングも更新して、垂直方向の中央に配置します。

ところで、このような質問に関しては、Chrome のデベロッパー ツールが役に立ちます。これらのツールを注意深く使用すると、何が起こっているかを確認するのに 1 分しかかかりません。

  1. 画像を右クリック > 要素を検査
  2. ウィンドウのサイズを変更すると、タグに px の明示的な高さが設定され、継続的に更新されていることがわかります。JS で行う必要があります。しかし、誰がそれを設定していますか？
  3. タグを右クリック > Break on... > Attributes Modifications
  4. ウィンドウのサイズを再度変更し、ブレークポイントにヒットします
  5. コール スタックの最上位は、縮小された jQuery コードに埋もれています。おそらく、CSS プロパティを設定するための一般的なコードです。スタック上で最も jQuery 以外のコードは何ですか?
  6. コードがあります！
于 2013-04-24T18:51:23.793 に答える