文書全体で要素が一貫して配置されていない

Question

この文書のこのページでは、画像をページ上に乱雑に配置する必要があります。私のアプローチは、topとleftのパーセンテージ値でそれぞれを調整することです。図形の要素は、奇妙な動作をしています。 #num1は一番上には反応しませんが、#num4には極端な値が必要ですが、#num5はうまくいきます。すべて6 #numは同じ特性を持っています。 1-3は、<div id="divA" class="row">で、4-6は、<div id="divB" class="row">

です。これは、私のCodePenへのリンクです。ここで

http://codepen.io/WallyNally/pen/QEZKrV

私に向かって働いていますモックアップです。

あなたはこれらのfigure sが困難であること、またはあなたがこれを行うの改善/別の方法を持っている場合、私に知らせてくださいされている理由として、洞察力を持っている場合。

また、これらが整理されたら、私はスクリプトの.on（mouseover）を追加する予定です。ホバリングされていないfigureをホバリングされた要素から離します。スクリプトで扱うことができるhtml/cssを書く方法があれば、あなたのためにボーナスポイントがあります。

Answer 1

ここではボックスや画像のフォーマットを変更しない例を作成しました。 したがって、最初のイメージは同じフォーマット：3：2になります。

• ボックスはドキュメントに絶対的に配置されています（topleftコーナー）。ドキュメントのサイズから幅も計算されます。
• box-border（s）は、正しい形式のボックスを作成します。
• イメージラッパーはイメージの位置を作成します。隠しコーナーの上に配置する必要があります。
• image-size（s）イメージの正しいフォーマットを作成します。
• img use object-fitは、すべてのブラウザと互換性がありません。あなたが何かを探しているなら、現代のあらゆるブラウザでうまくいくでしょう。背景のCSSスタイルを使うことができます。あなたも（溶液2を見つける。）SEOのためのimgタグが必要な場合は、素敵な回避策もあります：Is there an equivalent to background-size: cover and contain for image elements?

#boxes-wrapper { 
 
    position: relative; 
 
    width: 100%; 
 
    padding-top: 63.12%; 
 
} 
 
#box1, 
 
#box2, 
 
#box3, 
 
#box4, 
 
#box5, 
 
#box6 { 
 
    position: absolute; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    height: 0; 
 
} 
 
.box-border { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    -webkit-box-shadow: 0 0 0 2px #5f2325; 
 
    -moz-box-shadow: 0 0 0 2px #5f2325; 
 
    -ms-box-shadow: 0 0 0 2px #5f2325; 
 
    -o-box-shadow: 0 0 0 2px #5f2325; 
 
    box-shadow: 0 0 0 2px #5f2325; 
 
} 
 
.image-wrapper { 
 
    position: absolute; 
 
    height: 0; 
 
} 
 
.image-size { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 0; 
 
} 
 
.image-size img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    object-fit: cover; 
 
} 
 
#box1 { 
 
    top: 21.48%; 
 
    left: 4.88%; 
 
    width: 24.54%; 
 
} 
 
#box1 .box-border { 
 
    padding-top: 67.96%; 
 
} 
 
#box1 .image-wrapper { 
 
    bottom: -2.5%; 
 
    left: -3.05%; 
 
    width: 92.52%; 
 
} 
 
#box1 .image-size { 
 
    padding-top: 66.46%; 
 
    -webkit-transform: translateY(-100%); 
 
    -moz-transform: translateY(-100%); 
 
    -ms-transform: translateY(-100%); 
 
    -o-transform: translateY(-100%); 
 
    transform: translateY(-100%); 
 
} 
 
#box2 { 
 
    top: 31.36%; 
 
    left: 36%; 
 
    width: 19%; 
 
} 
 
#box2 .box-border { 
 
    padding-top: 67.8%; 
 
} 
 
#box2 .image-wrapper { 
 
    top: -7.85%; 
 
    left: -10.68%; 
 
    width: 92.52%; 
 
} 
 
#box2 .image-size { 
 
    padding-top: 66.54%; 
 
} 
 
#box4 { 
 
    top: 54.67%; 
 
    left: 1.42%; 
 
    width: 24.61%; 
 
} 
 
#box4 .box-border { 
 
    padding-top: 67.77%; 
 
} 
 
#box4 .image-wrapper { 
 
    bottom: -11.38%; 
 
    left: 10.74%; 
 
    width: 66.94%; 
 
} 
 
#box4 .image-size { 
 
    padding-top: 104.12%; 
 
    -webkit-transform: translateY(-100%); 
 
    -moz-transform: translateY(-100%); 
 
    -ms-transform: translateY(-100%); 
 
    -o-transform: translateY(-100%); 
 
    transform: translateY(-100%); 
 
}

<div id="boxes-wrapper"> 
 
    <div id="box1"> 
 
    <div class="box-border"> 
 
     <div class="image-wrapper"> 
 
     <div class="image-size"> 
 
      <img src="http://dummyimage.com/450x300/eee/333333.png" /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="box2"> 
 
    <div class="box-border"> 
 
     <div class="image-wrapper"> 
 
     <div class="image-size"> 
 
      <img src="http://dummyimage.com/450x300/eee/333333.png" /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="box4"> 
 
    <div class="box-border"> 
 
     <div class="image-wrapper"> 
 
     <div class="image-size"> 
 
      <img src="http://dummyimage.com/450x469/eee/333333.png" /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

EDIT：追加されましたボックス・ラッパー、理由は2行目に問題のは。