2

我正在使用脚本来缩放和图像以填充背景，同时保持纵横比。而且我还使用缩略图来换出该背景图像。如果新图像的纵横比与原始图像不匹配，则会发生失真。它显然仍在使用原始图像中的旧尺寸数据。我怎样才能解决这个问题？

编辑：这是一个小提琴你可以看到它的实际效果。这使用链接而不是缩略图（左上角）

调整代码大小（不是我的）：

$(window).load(function() {    

        var theWindow        = $(window),
        bgImg              = $("#bg");

        function resizeImg() {
        var imgwidth = bgImg.width();
        var imgheight = bgImg.height();
        var winwidth = $(window).width();
        var winheight = $(window).height();
        var widthratio = winwidth / imgwidth;
        var heightratio = winheight / imgheight;
        var widthdiff = heightratio * imgwidth;
        var heightdiff = widthratio * imgheight;
        var topPos = -(heightdiff-winheight) /2;
        var leftPos = -(widthdiff-winwidth) /2;
        if(heightdiff>winheight) {
            bgImg.css({
                width: winwidth+'px',
                height: heightdiff+'px',
                left:"0px",
                top:topPos+"px"
            });
        }
        else {
            bgImg.css({
                width: widthdiff+'px',
                height: winheight+'px',
                left:leftPos+"px",
                top:"0px"
            });     
        }
        $(".marker").html(bgImg.width()+" x "+bgImg.height());
    } 

      theWindow.resize(resizeImg).trigger("resize");            
});

触发代码：

$(document).ready(function(){
    $(".thumbs").click(function(e){
        e.preventDefault();
        $("#bg").attr("src", $(this).attr("href"));
        });
    });
4

2 回答 2

0

您需要在脚本中更改两件事：

     if(bgImg.width()>bgImg.height()){
        bgImg.css({
            width: 'auto',
            height: $(window).height()+'px',
            left:"0px",
            top:topPos+"px"
        });
    }
    else {
        bgImg.css({
            width: $(window).width()+'px',
            height: 'auto',
            left:leftPos+"px",
            top:"0px"
        });     
    }

主要思想是严格设置一个维度（例如：）100px和另一个维度auto- 浏览器的引擎将在此之后处理图像的纵横比。并且不会发生失真。

您必须在脚本中更改的第二件事： call resizeImg(), in<img>的 onload

于 2013-10-03T21:37:31.323 回答
0

你可以检查一下，我是否理解你的目标：JSFiddle。纯 CSS 可能会有所帮助：

<style>
#backgroundDiv
{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:0;
    z-index:-1;
    background-image: url("http://i.imgur.com/9bIasTp.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

}
</style>

<div id="backgroundDiv"></div>
于 2013-10-03T21:56:03.167 回答