親要素の高さを画像を含む部分に伸ばす方法

Question

何かが今、長い間苦しんでいます。私はイメージを親の身長に合わせる方法を見つけることができません。

私はここで多くの質問をしましたが、私には必要な答えがありませんでした。

これらの質問のいくつかは、次のとおりです。

CSS same height as Parent
Fit image to parent div's size
How can I resize an image dynamically with CSS as the browser width/height changes?
CSS: How can I set image size relative to parent height?
CSS: 100% width or height while keeping aspect ratio?
Make an image to fit it's parent dimensions
CSS: How can I set image size relative to parent height?

さて、問題は、私は親要素に画像を挿入するたびに、親はちょうど高さでストレッチをdoensn'tということです。

画像：私はイメージスライダーを構築しようとしている、とIMGが絶対的に配置されている必要があり

http://es.tinypic.com/view.php?pic=2s1u1ec&s=9#.WLnbWvKE1jk

。

赤い枠線でイメージを囲む必要があります。また、親がイメージ全体とパディングを囲む必要があります。

いくつかのコード：

HTML：

<section> 
Gray: parent 

    <div class="level0"> 
     <div class="container"> 
      <img src="1.jpg" alt="image"> 
     </div> 
    </div> 

</section> 

CSS：

* { 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
} 

html, body { 
    width: 100%; 
    height: auto; 

    background-color: #565656; 
} 

section { 
    position: relative; 
    width: 100%; 
    max-width: 1300px; 
    height: 100%; 
    margin: 0 auto; 
    padding: 1%; 

    background-color: #a1a4a8; 
} 

.level0 { 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

.container { 
    position: relative; 
    width: 100%; 
    height: 100%; 

    border: 4px solid red; 
} 

.level0 img { 
    position: absolute; 
    width: 100%; 
} 

私があふれてみました：隠された、最大の高さ、％、などを実際に動作する唯一のものは、親要素に固定の高さを設定しているが、それは私のために良いではありません。私は、親が自動的に画像の幅に高さが伸びるようにしたい。

もう、もう1つ。いくつかのJQueryやJSなどの回答を読んでいますが、私は純粋なCSS回答に感謝します。明らかにtrereは私が紛失しているものでなければなりません。

紛らわしいことがあれば教えてください。助けてくれてありがとう！

Answer 1

あなたは幅で高さを割ることによってパーセンテージで画像の縦横比を得ることができます。それを画像の親のパディングとして使用して、親に同じアスペクト比の形状を作成すると、画像のアスペクト比と自然に一致します。答えを

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
img, a { 
 
    text-decoration: none; 
 
    border: none; 
 
} 
 

 
html, body { 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: #565656; 
 
} 
 

 
section { 
 
    position: relative; 
 
    width: 100%; 
 
    max-width: 1300px; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    padding: 1%; 
 
    background-color: #a1a4a8; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    height: 0; 
 
    padding-top: 56.29510826%; 
 
    position: relative; 
 
} 
 

 
.level0 img { 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    width: 100%; 
 
}

<section> 
 
Gray: parent 
 

 
    <div class="level0"> 
 
     <div class="container"> 
 
      <img src="https://image.ibb.co/kZtbMF/Screen_Shot_2017_03_03_at_3_32_11_PM.png" alt="image"> 
 
     </div> 
 
    </div> 
 

 
</section>

Answer 2

絶対配置された画像に動的に対応する方法はありません。コンテナの高さをイメージよりも大きくする必要があります。

EDIT：@Michaelコーカーがそれを行うための方法ですが、あなたは私に言わせれば、それは彼の一部であるが巧みな、丸い穴に四角いペグだ証明しました。