如何使用自动缩放背景重叠自动缩放图像

Question

我试图将图像放置在位于可缩放div中的虚拟白板上。

我跟着这个指南，使“白板”的规模：Stretch and scale CSS background

您可以在这里看到演示：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;}