Поддерживайте пропорции при повторной обработке

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() и отрегулировать положение нижнего колонтитула в соответствии с этим. Дайте мне знать, нужен ли вам полный код?