画像の上にdivをオブジェクトフィットで正確に配置します

Question

divをこの画像（カップケーキ）の上に置きたいと思います。

は例えば、私は私のイメージは、ダイナミック幅と高さを持っているので、この

のように、チェリーレッドの上に私のdivを置きたいと私は、私のCSSで をobject-fit: cover;を使用しています私の画像のサイズが変更されると、divの位置はそれに応じて移動する必要があります。

画像に固定寸法がある場合は、position: absolute;を使用してください。しかし、私の画像にobject-fit: cover;があると、私の画像はユーザーのサイズ変更で動き回ります。サイズ変更が発生したときにdivを正確な位置に表示させるにはどうすればよいですか？

ありがとうございました。私の質問が面倒で理解できない場合は、私がネイティブの英語話者ではないので、私に知らせてください。

Answer 1

divの正確な上部と中央の位置を取得するには、CSScalc() functionを使用してください。

#box{ 
 
    width:auto; 
 
    height:auto; 
 
    position:relative; 
 
    overflow:hidden; 
 
} 
 
img{ 
 
    width:100%; 
 
    min-height:100%; 
 
    object-fit:cover; 
 
} 
 
#box > .bx{ 
 
    position:absolute; 
 
    width:60px; 
 
    height:60px; 
 
    background:#111; 
 
    top:5%; 
 
    left:calc(100% - 60%); 
 
    color:#fff; 
 
}

<div id="box"> 
 
<div class="bx">Text</div> 
 
<img src="http://i.stack.imgur.com/7Mj25.jpg"> 
 
</div>

Answer 2

あなた自身の質問に答えました。あなたがしなければならないことである：例えば、位置決めのためのパーセント値を使用します。

.my_cover_div { 
    position: absolute; 
    left: 60%; 
    top: 5%; 
} 

正確なポイントでセンタリングするため、this articleが有用である可能性があります。