Question

我有一个网站（http://www.probeast-network.com/index.php），并希望将页脚粘贴在图像的下边框下方。当我有一个图像的设置大小时会很容易，但是，我希望图像大小随窗口大小而变化。有什么想法吗？

以下是代码：

<script type="text/javascript" src="Image Slider/jquery.min.js"></script>
<script type="text/javascript" src="Image Slider/jquery.cycle.all.js"></script>
<script type="text/javascript" src="Image Slider/jquery.cycle2.shuffle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slider').each(function(ware) {
    $(this).cycle({
        timeout: 100000,
        speed:   1000,
        pager:  '.pager',
        pagerAnchorBuilder: function(i) {
            if (ware == 0)
                // for first slideshow, return a new anchro
                return '<a href="#">'+(i+1)+'</a>';
            // for 2nd slideshow, select the anchor created previously
            return '.pager a:eq('+i+')';
        }
    });
});
});
</script>

<script type="text/javascript">
var h=$("img").height();
$("#footer").css({"top":h+"px"});
</script>

HTML部分：

<div id="content">
  <div id="wrapper">
    <div id="masthead">

      <div id="pos">
        <div class="pager"></div>
        <div class="slider"
        data-cycle-slider="> div"
        >   
          <div class="size"><img class="imgsize" src="<?php echo $bild_giveaway;?>" alt=""/></div>
          <div class="size"><img class="imgsize" src="<?php echo $bild_video;?>" alt=""/></div>
          <div class="size"><img class="imgsize" src="<?php echo $bild_promine ?>" alt="" /></div>
          <div class="size"><img class="imgsize" src="<?php echo $bild_checkout ?>" alt="" /></div>
          <div class="size"><img class="imgsize" src="<?php echo $bild_tips ?>" alt="" /></div>
        </div>

        <div class="slider"
        data-cycle-slider="> div"
        >
          <div class="size1"></div>  
          <div class="size2"></div>
          <div class="size3"></div>
          <div class="size4"></div>
          <div class="size5"></div>
        </div>
      </div>

    </div>
    <div id="container"></div>
    <div id="footer"></div
  </div>
</div>

这是CSS代码，我希望我不会错过任何东西：

body {
margin: 0;
position: relative;
padding: 0;
background-image: url(Images/grey_stone.jpg);
}

#masthead {
width: 100%;
height: 100%;
}

#container {
position: relative;
width: 100%;
min-width: 1290px;
top: 100%;
}

#footer {
width: 100%;
float: right;
position: absolute;
}

#pos {
position: relative;
width: 100%;
z-index: 2;
margin: 0px auto;
height: 100%;
}

.imgsize {
position: absolute;
width: 100%;
left: 0px;
-webkit-box-shadow: 0px 0px 54px 14px #000000;
box-shadow: 0px 0px 54px 14px #000000;
top: 0px;
height: auto;
}

.slider {
width: 100% !important;
z-index: -95;
text-align: center;
margin: 0px auto;
position: absolute;
top: 0px;
opacity: 1;
height: 100%;
}

.size {
position: absolute;
min-width: 1290px;
margin: 0px auto;
right: 0%;
z-index: -14;
-webkit-box-shadow: 0px 0px 46px 5px #000000;
box-shadow: 0px 0px 46px 5px #000000;
width: 100% !important;
height: 100%;
}

最后，这是一个小提琴：https://jsfiddle.net/ovg2zjc1/2/

非常感谢：）

Answer 1

使用$('img').height();下的$(window).resize()计算图像高度，并根据它调整页脚位置。如果您需要完整的代码，请告诉我？

在重新调整时保持比例

1 个答案: