DummyBoxは画像(要素)を半分ずらすための余白用のCSSで、「img、gap」のサイズから「DummyBox」のサイズを算出する。
DummyBoxのサイズはDB、imgのサイズはIMG、gapのサイズはGAP、とする。
この場合だと、PC画面は横方向のサイズだけ計算すればおｋで、タブレット画面は縦方向のサイズだけ計算すればおｋです。
この場合だと(「PC画面、タブレット画面」の両方で)下記の式が成立する。
DB+GAP+IMG/2 = IMG+GAP/2
その式からDBのサイズを算出するために、その式を変形して単純化する。
DB = IMG+GAP/2-(GAP+IMG/2)
DB = IMG/2-GAP/2
DB = (IMG-GAP)/2
PC画面の場合、横方向のサイズは「img: 20vw、gap: 5.5vw」なので、それを代するとDummyBoxのwidthは下記のようになる。
DB = (20vw-5.5vw)/2 = 7.25vw
タブレット画面の場合、縦方向のサイズは「img: 30vw、gap: 3.5vw」なので、それを代するとDummyBoxのheightは下記のようになる。
DB = (30vw-3.5vw)/2 = 13.25vw
