在窗口调整大小时使用 jquery 的全屏图像？

Posted 2023-02-14

【中文标题】在窗口调整大小时使用 jquery 的全屏图像？

【英文标题】：Fullscreen image with jquery on window resize?

【发布时间】：2012-09-20 21:33:44

【问题描述】：

当触发窗口调整大小功能时，我正在尝试使用 jquery 制作全屏图像。但我得到了这种结果 - 你可以在图像底部看到一个我不知道如何修复它的间隙。

基本的html，

<!-- container -->
    <div id="container" class="container">

        <div class="holder-supersize" id="supersize">

            <ul class="background-supersize">
                <li><a href="#"><img src="styles/images/IMG_0250.jpg"    /></a></li>
                <li><a href="#"><img src="styles/images/IMG_0255.jpg"    /></a></li>
                <li class="active"><a href="#"><img src="styles/images/IMG_0323.jpg"    /></a></li>
            </ul>

        </div>

    </div>
    <!-- container -->

jquery 用于在窗口调整大小时更新图像大小，

$(document).ready(function()

    $(window).resize(function()

        $(".holder-supersize").each(function() 

            //Define image ratio & minimum dimensions
            var minwidth = .5*(640);
            var minheight = .5*(480);
            var ratio = 480/640;

            //Gather browser and current image size
            var imagewidth = $(this).width();
            var imageheight = $(this).height();
            var browserwidth = $(window).width();
            var browserheight = $(window).height();

            //Check for minimum dimensions
            if ((browserheight < minheight) && (browserwidth < minwidth))
                $(this).height(minheight);
                $(this).width(minwidth);
            
            else
               
                //When browser is taller    
                if (browserheight > browserwidth)
                    imageheight = browserheight;
                    $(this).height(browserheight);
                    imagewidth = browserheight/ratio;
                    $(this).width(imagewidth);

                    if (browserwidth > imagewidth)
                        imagewidth = browserwidth;
                        $(this).width(browserwidth);
                        imageheight = browserwidth * ratio;
                        $(this).height(imageheight);
                    

                

                //When browser is wider
                if (browserwidth >= browserheight)
                    imagewidth = browserwidth;
                    $(this).width(browserwidth);
                    imageheight = browserwidth * ratio;
                    $(this).height(imageheight);

                    if (browserheight > imageheight)
                        imageheight = browserheight;
                        $(this).height(browserheight);
                        imagewidth = browserheight/ratio;
                        $(this).width(imagewidth);
                    
                
            
            return false;
        );

    );

);

超大图片的 CSS

/* Supersize -------------------------------------------*/

.holder-supersize 
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:0;


.background-supersize 
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;


.background-supersize li 
    width:100%;
    height:100%;
    overflow:hidden;
    position:absolute;
    left:0;
    top:0;
    text-align:center;


.background-supersize li img 
    /* for image with height < width */
    /**/
    width:100%;
    height:auto;


    /* for image with height > width */
    /*
    width:auto;
    height:100%;
    */


.background-supersize li ,
.background-supersize a,    
.background-supersize img
    display:none;
    

.background-supersize .active, 
.background-supersize .active a,
.background-supersize .active img
    display:inline;

这是jsfiddle 的链接，这是查看actual product 的链接。

任何想法我做错了什么以及如何解决它？

【参考方案1】：

您的代码似乎通过锁定高宽比来防止图像倾斜。因此，除非窗口具有相同的比例，否则您要么在底部留出空间（对于高/窄窗口），要么在右侧留出空间（对于短/宽窗口）。

如果您希望图像倾斜，您可以通过简单地使高度等于窗口高度和宽度等于窗口宽度来大大简化代码。

【讨论】：

@lauthiamkok：那么你必须忍受这个空间，没有其他办法......好吧，除非你更喜欢裁剪图像？因此，如果它是高/窄的，底部是图像的底部，但图像的右侧将被切断。