css - 图像被剪掉

Question

我有以下代码: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;
}

Answer 1

这是你的代码

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