如何将自动缩放图像与自动缩放背景重叠

Question

我正试图将图像放置在可扩展div中的虚拟白板上。

我遵循本指南制作了"白板"比例尺：拉伸和缩放CSS背景

您可以在此处看到演示：http://staging1.populearn.com/new.html

我不知道如何在白板上移动那些红色的盒子，并让它们按比例缩放。这可能吗？

干杯

这是HTML:

      <div class="lesson-pane">
        <div id="chalkboard-background">
          <img src="/img/whiteboard_teacher.png" class="stretch" alt="" />
        <div id="chalkboard">
          <div id="chalkboard-images">
            <span id="image1" class="33"><img src="/img/1.png" alt="" /></span>
            <span id="image2" class="33"><img src="/img/2.png" alt="" /></span>
            <span id="image3" class="33"><img src="/img/3.png" alt="" /></span>
          </div><!--/chalkboard-images-->   
        </div><!--/chalkboard-->
        </div><!--/chalkboard-background-->
      </div><!--/lesson-pane-->

这是CSS：

.lesson-pane {
  padding: 20px;
  margin-bottom: 30px;
  background-color: #f5f5f5;
  background-image:url('/img/background_europe.png');
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  border-style:solid;
  border-width:3px;
  max-width: 850px;
}
.lesson-pane h1 {
  margin-bottom: 0;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -1px;
}
.lesson-pane p {
  font-size: 18px;
  font-weight: 200;
  line-height: 27px;
}
#chalkboard {
    position: relative; 
}
#chalkboard-background {
    width: 100%; 
    position: relative; 
}
.stretch {
    width:100%;
}
.33 {
    width:33%;  
}
#chalkboard-images {
    position: relative; 
    width:100%;
}

Answer 1

如果要缩放，则需要确保使用相同类型的测量，在本例中为百分比。然后，把你的黑板绝对放在图形的顶部，然后告诉三个图像容器中的每一个占据其空间的1/3，里面的每个图像都要拉伸到100%。

这是使其工作的CSS（除了现有的CSS，您可以将其粘贴在之后）

/* Make .lesson-pane use relative % padding */
.lesson-pane {padding:2%;}
/* Absolutely position ".chalkboard" over graphic (approx) */
#chalkboard {position:absolute; left:3%; top:5%; width:77%; height:75%;}
/* Make each image take up 1/3 of space and scale */
#chalkboard-images {white-space:nowrap; font-size:0px; text-align:center;}
#chalkboard-images > span {display:inline-block; width:31.3%; margin:1%;}
#chalkboard-images > span > img {width:100%; height:auto;}