响应式全宽幻灯片，最大页面高度为

Question

我有一个幻灯片（图片），目前是浏览器的100％并堆叠在其他页面部分。问题是当在大屏幕（图像27和更大）上时，图像会扩展到折叠之外。

如果它变得更小并且高于折叠但不低于它，那就没关系。这是我目前的尝试。

这是一个使用Bootstrap CDN构建的Wordpress主题。我也在使用amazing slick slider.

基本上我试图让图像拉伸浏览器窗口的大小而不是更大（滚动到滚动）

HTML：

<div class="page-section">
    <div class="slider slick">
        <?php while ( have_posts() ) : the_post(); 
        $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' );
        ?>
        <a href="<?php the_permalink();?>">
        <div class="casestudy-slide" style="background: url(<?php echo $src[0]; ?> );">
            <div class="casestudy-slide-text">
                View Our Case Studies
            </div>
            <div class="casestudy-logos">
                <img src="<?php bloginfo('template_directory'); ?>/images/casestudy-logos.png" />
            </div>
        </div>
        </a>
        <?php endwhile; // end of the loop. ?>
    </div>
</div>

<div class="page-section">
    other page content
</div>
<div class="page-section">
    other page content
</div>

CSS：

.page-section {
    width: 100%;
    height: 100%;
}
.casestudy-slide {
    display: block;
    margin-top:-200%;
    padding-top:10%;
    padding-bottom:47%;
    margin:0 !important;
    height: auto;
  -webkit-background-size: cover !important;
   -moz-background-size: cover!important;
    background-size: cover!important;
   -o-background-size: cover!important; 
}

请check out the page here并提前多多感谢。