Question

正如您所见，图像被切掉了。如果不拿标记功能，我无法完全显示它。

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

Answer 2

从类

下面删除overflow属性

.swMain .stepContainer
{
    overflow:hidden; //remove this
}

然后通过给出高度和边距来调整你的css

Answer 3

http://jsfiddle.net/NkCPA/1/

我已将这些行添加到样式表的末尾：

#wrapper-AddSensors_img > img:first-child {
    position: relative;
}

.swMain .stepContainer div.content {
    min-height: 300px;
    height: auto;
}

相对定位允许#wrapper和.content div获取img的高度。将.content高度设置为auto可让浏览器为大图像计算正确的高度，因此您也可以将此代码与其他大小的图像一起使用。

图像被剪掉了

3 个答案: