使用图片拉伸div，以填充静态宽度边栏旁边的空白区域

时间：2018-08-06 21:00:18

标签： jquery html css scale

我当前网站的截图。

该网站是使用WordPress的“ Stellar”主题（100％合法，已购买）创建的。有很多javascript / jquery会动态更改容器的大小等，因此请记住这一点。我在问题的底部添加了一个指向实时站点的链接，因此您可以从根本上调试一些行为。

我正在尝试拉伸容器和其中的图像（放置在菜单侧栏旁边的右侧），以填充浏览器窗口中所有剩余的空间。目前，您可以在它们下面看到一条白色条纹（称为剩余空间）。

您能帮我在那里实现完整的响应式（100vh和width = 100vh-sidebar）网格吗？

下面是代码：

<div id="wrapper">

<div id="page_header_bg" style="background-image:url(http://www.am.hekko24.pl/wp-content/uploads/2013/05/title_bg1.jpg);"></div>

<div id="page_caption">
    <div id="page_caption_wrapper" class="visible" style="margin-top: 378px;">
                            <img src="" alt="">
                    </div>

    <div id="social_share_wrapper" class="visible">
    <ul>
        <li><a title="Share On Facebook" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.am.hekko24.pl%2F"><i class="fa fa-facebook marginright"></i></a></li>
        <li><a title="Share On Twitter" target="_blank" href="https://twitter.com/intent/tweet?original_referer=http://www.am.hekko24.pl/&amp;url=http://www.am.hekko24.pl/"><i class="fa fa-twitter marginright"></i></a></li>
        <li><a title="Share On Pinterest" target="_blank" href="http://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.am.hekko24.pl%2F&amp;media=http%3A%2F%2Fwww.am.hekko24.pl%2Fwp-includes%2Fimages%2Fmedia%2Fdefault.png"><i class="fa fa-pinterest marginright"></i></a></li>
        <li><a title="Share On Google+" target="_blank" href="https://plus.google.com/share?url=http://www.am.hekko24.pl/"><i class="fa fa-google-plus marginright"></i></a></li>
    </ul>
</div>
</div>

<!-- Begin content -->
<div id="page_content_wrapper" class="two nopadding gallery" style="width: 743px;">

    <div class="inner">

        <div class="inner_wrapper">

            <div id="blog_grid_wrapper" style="position: relative; overflow: hidden; height: 742px;" class="isotope">

            <div class="wall_entry type-post post gallery masonry element isotope-item animated1 visible" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 10px, 0px);">
                                <div class="wall_thumbnail">
                    <a href="http://www.am.hekko24.pl/?galleries=fashion-collection">
                        <img src="http://www.am.hekko24.pl/wp-content/uploads/2014/09/704113-1600x1200-485x485-1-485x485.jpg" alt="" class="portfolio_img static">
                        <div class="mask">
                            <div class="mask_frame">
                                                                <ul class="gallery_img_slides">
                                                                <li style="position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0;"><img src="http://www.am.hekko24.pl/wp-content/uploads/2014/09/Fotolia_40705828_Subscription_Monthly_M-485x485.jpg" alt="" class="static"></li>
                                                                <li style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1; width: 485px; height: 485px;"><img src="http://www.am.hekko24.pl/wp-content/uploads/2014/09/666314-1600x1200-485x485.jpg" alt="" class="static"></li>
                                                                <li style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1; opacity: 0;"><img src="http://www.am.hekko24.pl/wp-content/uploads/2014/09/704113-1600x1200-485x485.jpg" alt="" class="static"></li>
                                                                </ul>

                                <div class="mask_image_content hascycle">
                                    <div class="mask_image_content_frame">
                                        <h6>Fashion Collection</h6>
                                        <span>Model / Fashion / Portrait</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

            </div>


            <div class="wall_entry type-post post gallery masonry element isotope-item animated2 visible" style="position: absolute; left: 0px; top: 0px; transform: translate3d(371px, 10px, 0px);">
                                <div class="wall_thumbnail">
                    <a href="http://www.am.hekko24.pl/?galleries=wild-life-collection-2">
                        <img src="http://www.am.hekko24.pl/wp-content/uploads/2014/09/666314-1600x1200-485x485-1-485x485.jpg" alt="" class="portfolio_img static">
                        <div class="mask">
                            <div class="mask_frame">
                                                                <ul class="gallery_img_slides">
                                                                <li style="position: absolute; top: 0px; left: 0px; display: list-item; z-index: 4; opacity: 1;"><img src="http://www.am.hekko24.pl/wp-content/uploads/2012/08/hero13-485x485.jpg" alt="" class="static"></li>
                                                                <li style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2; opacity: 0;"><img src="http://www.am.hekko24.pl/wp-content/uploads/2012/08/Chris-Brignola1-485x485.jpg" alt="" class="static"></li>
                                                                <li style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1; opacity: 0;"><img src="http://www.am.hekko24.pl/wp-content/uploads/2014/09/1-485x485.jpg" alt="" class="static"></li>
                                                                </ul>

                                <div class="mask_image_content hascycle">
                                    <div class="mask_image_content_frame">
                                        <h6>Wild Life Collection 2</h6>
                                        <span>Forest / Lion</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

            </div>


            <div class="wall_entry type-post post gallery masonry element isotope-item animated3 visible" style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 381px, 0px);">
                                <div class="wall_thumbnail">
                    <a href="http://www.am.hekko24.pl/?galleries=elegant-luxury-model">
                        <img src="http://www.am.hekko24.pl/wp-content/uploads/2013/06/16105-evropeyka_s_velosipedom-485x485.jpg" alt="" class="portfolio_img static">
                        <div class="mask">
                            <div class="mask_frame">
                                                                <ul class="gallery_img_slides">
                                                                <li style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1; width: 485px; height: 485px;"><img src="http://www.am.hekko24.pl/wp-content/uploads/2014/09/Gabriel-Santiago-485x485.jpg" alt="" class="static"></li>
                                                                <li style="position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0; width: 485px; height: 485px;"><img src="http://www.am.hekko24.pl/wp-content/uploads/2014/09/Fotolia_40705828_Subscription_Monthly_M-485x485.jpg" alt="" class="static"></li>
                                                                <li style="position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0; width: 485px; height: 485px;"><img src="http://www.am.hekko24.pl/wp-content/uploads/2011/06/5161-list_klena_v_chashke-485x485.jpg" alt="" class="static"></li>
                                                                </ul>

                                <div class="mask_image_content hascycle">
                                    <div class="mask_image_content_frame">
                                        <h6>Elegant Luxury Model</h6>
                                        <span>Portrait / Fashion</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

            </div>


            <div class="wall_entry type-post post gallery masonry element isotope-item animated4 visible" style="position: absolute; left: 0px; top: 0px; transform: translate3d(371px, 381px, 0px);">
                                <div class="wall_thumbnail">
                    <a href="http://www.am.hekko24.pl/?galleries=the-last-light">
                        <img src="http://www.am.hekko24.pl/wp-content/uploads/2012/08/PlayWP-259-1000x600-485x485.jpg" alt="" class="portfolio_img static">
                        <div class="mask">
                            <div class="mask_frame">
                                                                <ul class="gallery_img_slides">
                                                                <li style="position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0;"><img src="http://www.am.hekko24.pl/wp-content/uploads/2012/08/Thomas-Lefebvre1-485x485.jpg" alt="" class="static"></li>
                                                                <li style="position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0; width: 485px; height: 485px;"><img src="http://www.am.hekko24.pl/wp-content/uploads/2011/06/490084-1600x1200-485x485.jpg" alt="" class="static"></li>
                                                                <li style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1; width: 485px; height: 485px;"><img src="http://www.am.hekko24.pl/wp-content/uploads/2014/09/bird-seagull-look-hd-wallpaper-485x485.jpg" alt="" class="static"></li>
                                                                </ul>

                                <div class="mask_image_content hascycle">
                                    <div class="mask_image_content_frame">
                                        <h6>The Last Light</h6>
                                        <span>Lighting / Sun Set</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

            </div>

                        </div>

        </div>

    </div>



</div>

</div>

您可以在此处预览网站：

This is a link to mentioned site

0 个答案:

没有答案
相关问题
最新问题