1

サイトのさまざまな側面を宣伝する「広告ブロック」があるサイトに取り組んでいます。私のサイトは、レスポンシブになるように Skeleton フレームワークでセットアップされています。私が持っている 1 つの adblock は、互いに回転する 2 つの画像だけです...そして、画面サイズが回転するにつれて、適切に作成およびサイズ変更されます。

背景画像のあるdivである別の広告ブロックがあり、その特定の部分(中央)に回転する画像があります(jqueryサイクルプラグインを使用)。画像部分を絶対に配置して、必要な場所に表示し、その側面だけが画像を回転できるようにします。背景画像の部分は適切にサイズ変更されますが、私の画像はそうではありません...それらは同じサイズのままであるため、「フレーム」内にある背景画像の外側で壊れます。

私は何が起こっているのかを簡単にモックアップしました: http://jsfiddle.net/DjvS9/1/

フレームを構成する背景画像の代わりに、テキストを含む div を配置しただけであることに注意してください。

私が間違っていることと、何を修正する必要があるかについて何か考えはありますか? 絶対配置のせいでしょうか..??

機能した最初の広告ブロックを修正するために使用した前提は、このフィドルで見つけた例でした: http://jsfiddle.net/vengiss/QRWAD/6/

どんな助けでも大歓迎です！

ありがとう！！

HTML コード:

<div id="bkgd">
<div id="MyAdBlock">
text<br />        
    text<br />
text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<div id="MyAds" class="MyAdImg">
    <img src="http://placehold.it/165x197" width="165" class="placeholder1" />
    <a href="#" target="_blank"><img src="http://placekitten.com/165/197" class="image_size" alt="Img1" /></a>
    <a href="#" target="_blank"><img src="http://placekitten.com/165/194" class="image_size" alt="Img2" /></a>
    <a href="#" target="_blank"><img src="http://placekitten.com/165/195" class="image_size" alt="Img3" /></a>
    <a href="#" target="_blank"><img src="http://placekitten.com/165/196" class="image_size" alt="Img4" /></a>
</div>

CSS: body{ background:#000;
}

#bkgd{

}

#MyAdBlock{
position:relative;
background:#ffffff;  
max-width:50%;
height:auto;
border:5px solid red;
}

.MyAdImg{
position:absolute;
top:73px;
left:28px;
}

 .image_size{
max-width: 100%;
height: auto;
 }
4

0 に答える 0