1

我正在一个网站上工作，该网站有一些“广告块”，可以宣传该网站的各个方面。我的网站是使用 Skeleton 框架设置的，因此它是响应式的。我拥有的一个广告块只是两个相互旋转的图像......它可以随着屏幕尺寸的旋转而适当地创建和调整大小。

我有另一个广告块，它是一个带有背景图像的 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：主体{背景：#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