如何使用自動縮放背景重疊自動縮放圖像

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;}