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

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

1 个答案: