Несогласованное позиционирование элементов по документу

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 s от зависающего элемента. Если есть способ написать html/css, который будет поддаваться обработке скриптом, бонусные баллы для вас.

Answer 1

Я создал пример здесь, который не меняет формат ящиков и изображений. Итак, первое изображение будет иметь тот же формат: 3: 2.

• коробка (ы) позиционируется абсолютно для документирования (угловой угол), ширина также рассчитывается на основе размера документа.
• box-border (ы) создают правильный формат ящиков.
• image-wrapper (s) создает положение для изображений - и он должен располагаться над скрытым углом.
• Размер изображения (-ов) создает правильный формат изображений
• img использовать объектно-ориентированный, который несовместим со всеми браузерами. Если вы ищете что-то, что будет работать на каждом современном браузере, вы можете использовать стиль фона css. Существует также хороший обходной путь, если вы также должны IMG тег для SEO (найти решение 2): 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-го ряда.