絶対的な位置の子と親の高さは0です

Question

これはよくある質問ですが、まだ私の問題の解決策は見つかりませんでした。

.parentはスライダーで、.childは画像です。 .childの高さ（絶対配置された要素）を.parentに渡す必要があります。

.parentは、0pxの高さを有する。何か案は？

ありがとうございます。

<div class="parent"> 
    <img class="child"></div> 
</div> 

.child { 
    position: absolute; //It must be absolute , because slider works with this 
    width: 100%; 
    top: 0; 
    left: 0; 
    right: 0; 
} 

Answer 1

私はコメントで述べたように、あなたはおそらく <img>の要素を追加することができます。 1つはposition: absolute - アプリケーションに必要なもの、もう1つはvisibility: hiddenだが、position: relativeです。

マークアップについて混乱させたくない場合は、:afterや:beforeのような擬似要素と同様のことができます。しかし、その考え方は同じです。

親が画像の高さを占めるようになりました。このソリューションは、アプリケーションによっては動作しないかもしれませんが、あなたの質問ではあまり明確ではありませんが、試してみる価値があります。

.parent { 
 
    background: #AAA; 
 
} 
 

 
.child { 
 
    position: absolute; 
 
} 
 

 
.child-hidden { 
 
    visibility: hidden; 
 
}

<div class="parent"> 
 
    <img class="child" src="http://www.extremekitcars.com/wp-content/uploads/2016/01/Sports-Cars.png"> 
 
    <img class="child-hidden" src="http://www.extremekitcars.com/wp-content/uploads/2016/01/Sports-Cars.png"> 
 
</div>

Answer 2

あなたは画像のサイズを知っているので、あなたは幅で高さを分割し、アスペクト比を得ることができます。次にそれを垂直パディングパーセンテージとして親に適用すると、それにより親がイメージの大きさに応じて一致するようになります。

.child { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
.parent { 
 
    border: 1px solid red; 
 
    position: relative; 
 
    padding-bottom: 39.86451277%; /* (765/1919) * 100 */ 
 
}

<div>some content</div> 
 

 
<div class="parent"> 
 
    <img class="child" src="http://via.placeholder.com/1919x765"> 
 
</div> 
 

 
<div>more content</div>