2

レスポンシブ幅と固定高さの親divがあり、その中にいくつかの画像があります。実行時に、divの幅と高さを計算し、画像に幅（px）と高さ（px）のパラメーターを適用するJquery関数が必要です。つまり、今の私のコードは

<div id="slider-wrapper" class="someclass">
    <img src="/image1.jpg" alt="" />
    <img src="/image2.jpg" alt="" />
    <img src="/image3.jpg" alt="" />
</div>

私が必要とする生成されたコードは

  <div id="slider-wrapper" class="someclass">
    <img src="/image1.jpg" height="300px" width="total-div-width(px)" alt="" />
    <img src="/image2.jpg" height="300px" width="total-div-width(px)" alt="" />
    <img src="/image3.jpg" height="300px" width="total-div-width(px)" alt="" />
</div>

期待していただきありがとうございます

4

1 に答える 1

8

jQueryを使用すると、、、またはを使用.height()でき.innerHeight()ます.outerHeight()。

違いは次のとおりです。

  • height()要素の高さだけを返し、境界線、余白、パディングは返しません
  • innerHeight()要素の高さとパディングを返します
  • outerHeight()要素の高さ、パディング、境界線を返します
  • outerHeight(true)要素の高さ、パディング、境界線、マージンを返します

この投稿では、jsFiddleを使用した出力例などの詳細をここに示します。

width()幅には、、innerWidth()またはを使用できますouterWidth()。
高さの場合と同じロジックが適用されます。

すべての値はピクセル単位です。

高さ/幅を取得するには、次のように使用できます。 

// The below is an example, you need to add your element references as required.

// Use height(), innerHeight() or outerHeight() as needed.
var newHeight = $("#slider-wrapper").height();

// Use width(), innerWidth() or outerWidth() as needed.
var newWidth = $("#slider-wrapper").width();

高さ/幅を設定するには、次のように使用できます。 

// The below is an example, you need to add your element references as required.
var newHeight = $("#slider-wrapper img").height(newHeight);
var newWidth = $("#slider-wrapper img").width(newWidth);
于 2012-07-26T20:09:41.057 に答える