如何使用自动缩放背景重叠自动缩放图像
问题描述:
我试图将图像放置在位于可缩放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%;
}
答
如果你缩放,你需要确保你使用相同一种测量,在这种情况下百分比。然后,将黑板绝对放置在图形的顶部,然后告诉三个图像容器中的每一个占用其空间的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;}
哇,谢谢。它非常完美! – Jeremy 2012-02-11 23:16:00