相対divコンテナの内部には、絶対imgの高さがあります。

<div id="mainPic" style="width:50%;"> 
    <img id="pic1" src="#" width="100%"> 
    <img id="pic2" src="#" width="100%"> 
</div>

div＃mainPicには、親の幅が50％の2つの画像があります。画像はそれ以下ではない全幅を使用し、高さをオートスケールします。 mainPicは画像と同じ高さになります。問題は、イメージを絶対に設定する必要があるということです。なぜなら、イメージを絶対に設定する必要があるからです。したがって、両方のルールがあります：相対divコンテナの内部には、絶対imgの高さがあります。

position : absolute; 
top : 0px; 
left : 0px;

しかし、div＃mainPicは、ダイナミックに自動スケールされた画像の高さを持っていません。 JSはウィンドウのサイズを変更するたびに高さを1回だけ設定するのではなく、Javascriptも出ています。

出典

2016-07-13 MisterRecursion

なぜ2つの画像がお互いに必要ですか？あなたは常に2つの画像しか持っていませんか？ 2つの画像の寸法はまったく同じですか？私は比較的簡単な修正を考えることができますが、これを最初に理解する必要があります。 – Jayx

@Jayx私はDiashowのようなものを作りたいと思う。 1つのピクチャはゆっくりと不透明度が0になるため、下の他のピクチャが表示されます。そして何度も繰り返します。 – MisterRecursion

絶対配置は、最初の非静的な親要素を基準にして要素の位置を設定します。おそらく#mainPicの位置を設定していないでしょう。デフォルト値はstaticに設定されています。つまり、子要素#pic1と#pic2の位置を絶対値に変更すると、bodyに相対的な絶対位置が与えられます。これは、単に非固定の位置を#mainPicに与えることで解決できます。例フィデリック：https://jsfiddle.net/thinker3197/n4kn2wLa/

出典

2016-07-13 21:35:31

さて、私は相対的な位置に設定しました。しかし私の問題は実際には#mainPicの配置ではなく、pic1とpic2の配置です。私は彼らに絶対的な立場を与えることでそれを行うことができます。問題#mainPicに境界線があるため、#mainPicが2つの写真の高さを自動的に持たないことがわかります – MisterRecursion

高さを計算し、js- 'var picHeight = $（ '＃pic1'）で動的に設定します。高さ（）;$（ '＃mainPic'）。css（ 'height'、picHeight）; ' –

相対divコンテナの内部には、絶対imgの高さがあります。

答えて

関連する問題