Question

我正在使用脚本进行缩放和图像填充背景，同时保留纵横比。我也使用缩略图来换掉背景图像。如果新图像与原始图像不匹配，则会发生失真。它显然仍然使用原始图像中的旧尺寸数据。我该如何解决这个问题？

编辑：这是Fiddle您可以看到它的实际效果。这使用链接而不是缩略图（左上角）

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

$(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"));
        });
    });

Answer 1

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

     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 - 浏览器的引擎将在此之后处理图像的方面。并且不会发生扭曲。

您需要在脚本中更改第二件事：在resizeImg()的onload

中调用<img>

Answer 2

您可以检查，我是否了解您的目标：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>

更改src后图像宽高比错误

2 个答案: