我有以下代码：http: //jsfiddle.net/arp8x/
如您所见，图像被剪掉了。如果不取消标记功能，我无法让它完全显示。
<div id="wrapper-AddSensors_img">
<img id="AddSensors_img" src="http://3011victor.com/downloads/floorplan.gif" />
</div>
#wrapper-AddSensors_img {
position: relative;
}
#wrapper-AddSensors_img img, #wrapper .marker {
position: absolute;
}
#wrapper-AddSensors_img img {
top: 0;
left: 0;
}
#wrapper-AddSensors_img .marker {
z-index: 100;
}
这是你的代码
<div class="stepContainer" style="height: 450px;"><div id="step-1" class="content" style="display: block;">
<h2 class="StepTitle">Step 1 Content</h2>
<span class="marker black" style="display:none"></span>
<div id="wrapper-AddSensors_img">
<img id="AddSensors_img" src="http://3011victor.com/downloads/floorplan.gif">
</div>
</div><div id="step-2" class="content" style="display: none;">
<h2 class="StepTitle">Step 2 Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><div id="step-3" class="content" style="display: none;">
<h2 class="StepTitle">Step 3 Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><div id="step-4" class="content" style="display: none;">
<h2 class="StepTitle">Step 4 Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div></div>
<div class="stepContainer" style="height: 450px;"><div id="step-1" class="content" style="display: block;">
请看上面的这一行，你会看到style="height:450px"已经增加了。
并且还增加了
.swMain .stepContainer div.content {
display: block;
position: absolute;
float: left;
margin: 0;
padding: 5px;
border: 1px solid #CCC;
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
color: #5A5655;
background-color: #F8F8F8;
height: 435px; /* see it */
text-align: left;
overflow: visible;
z-index: 88;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
width: 968px;
clear: both;
}
从下面的类中删除溢出属性
.swMain .stepContainer
{
overflow:hidden; //remove this
}
然后通过给出高度和边距相应地调整你的CSS
我已将这些行添加到样式表的末尾：
#wrapper-AddSensors_img > img:first-child {
position: relative;
}
.swMain .stepContainer div.content {
min-height: 300px;
height: auto;
}
相对定位允许 #wrapper 和 .content div 获取 img 的高度。将 .content 高度设置为 auto 可以让浏览器计算大图像的正确高度，因此您也可以将此代码用于其他大小的图像。