CSS：background-size：coverの画像を基準に要素を配置するにはどうすればいいですか？

Question

私はゲームを作っていて、background-size: coverを使ってブラウザウィンドウに合うように拡大縮小（必要に応じてトリミング）された一連の「ルーム」画像を持っています。

ゲーム内の要素をこれらの画像上の重要な位置に配置したいと思いますが、ブラウザのサイズが変わると部屋の画像が位置/縮尺が変わるので難しくなります。

は、私はここで簡単なデモを持っている： https://jsfiddle.net/p4p699cn/3/embedded/result/ - （ <div>元素を含有するか、この場合には、）は、ブラウザのサイズが変更されたときように、理想的に、私は、木の上に赤い「X」を配置することができるだろう内側の「X」は、ブラウザウィンドウではなく元の画像の比率に対して相対的な位置を維持します。

どのようにこれを達成することができますか？

Answer 1

CSS backgroundの代わりに単純な<img/>タグを使用することで、ほとんど必要なものを達成することができます。しかし、それはbackground-size: coverと同じではなく、イメージの最小/最大サイズについていくつかの仮定を行う必要があります。以下はあなたのコードで、若干変更されています。 innerボックスのdisplay: inline-blockにも注意してください。重要です。

body, html { 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 3px solid #cccccc; 
 
    resize: both; 
 
    overflow: hidden; 
 
} 
 

 
.inner { 
 
    width: auto; 
 
    height: 100%; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.img { 
 
    height: 100%; 
 
    width: auto; 
 
} 
 

 
.marker { 
 
    font-size: 48px; 
 
    color: red; 
 
    position: absolute; 
 
    top: 63%; 
 
    left: 7%; 
 
    padding-left: 20%; 
 
    transform: translate(0, -100%); 
 
}

<div class="container"> 
 
    <div class="inner"> 
 
    <div class="marker">X</div> 
 
    <img src="http://feelgrafix.com/data/landscape/landscape-3.jpg" height="2848" width="4288" class="img" /> 
 
    </div> 
 
</div> 
 

 
drag this box to resize it