Divs absolute into responsive img

Question

私は応答性/高さの画像を持っています。画像のサイズが動的になるため、絶対的な要素をimgにコーディングする必要があります。

コード：

#contenedorimagen { 
 
    width: 100%; 
 
    background: #000; 
 
} 
 
#imagen { 
 
    position: relative; 
 
    width: 100vw; 
 
    height: 90vh; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 
#i { 
 
    max-width: 100%; 
 
    height: auto; 
 
    max-height: 100%; 
 
} 
 
#imagen #c { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    color: #fff; 
 
} 
 
#imagen #h { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    color: #fff; 
 
} 
 
#imagen #pm { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    color: #fff; 
 
}

<div id="contenedorimagen"> 
 
    <div id="imagen"> 
 
    <div id="c">0</div> 
 
    <div id="h">0</div> 
 
    <div id="pm">0</div> 
 
    <img id="i" src="https://i.imgur.com/kLkrgKO.jpg" /> 
 
    </div> 
 
</div>

おかげ

例の画像あなたがイメージコンテナへmax-widthを与える必要があり firefox

Answer 1

#contenedorimagen { 
 
    width: 100%; 
 
    background: #000; 
 
} 
 

 
#imagen { 
 
    position: relative; 
 
    width: 100vw; 
 
    height: 90vh; 
 
    max-width: 100%; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 

 
#i { 
 
    max-width: 100%; 
 
    height: auto; 
 
    max-height: 100%; 
 
} 
 

 
#imagen #c { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    color: #fff; 
 
} 
 

 
#imagen #h { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    color: #fff; 
 
} 
 

 
#imagen #pm { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    color: #fff; 
 
}

<div id="contenedorimagen"> 
 
    <div id="imagen"> 
 
     <div id="c">0</div> 
 
     <div id="h">0</div> 
 
     <div id="pm">0</div> 
 
     <img id="i" src="https://i.imgur.com/kLkrgKO.jpg" /> 
 
    </div> 
 
</div>

Answer 2

たぶん、あなたはあなたの正確なニーズに合わせてこの例を適応させることができます。

#contenedorimagen { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#contenedorimagen #i { 
 
    width: 100%; 
 
    height: auto; 
 
    display: block; 
 
} 
 

 
#contenedorimagen div { 
 
    background: #000; 
 
    padding: 15px; 
 
    color: #fff; 
 
} 
 

 
#c { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#h { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
} 
 

 
#pm { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<div id="contenedorimagen"> 
 
    <div id="c">0</div> 
 
    <div id="h">0</div> 
 
    <div id="pm">0</div> 
 
    <img id="i" src="https://i.imgur.com/kLkrgKO.jpg" /> 
 
</div>