次のコードがあります: 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 に設定すると、ブラウザが大きな画像の正しい高さを計算できるようになるため、このコードを他のサイズの画像でも使用できます。