Question

我有这个代码示例：

$(document).ready(function () {
    var msimg = $("#msbgimage");
    var full = $("#msbgimagefull");
    if (msimg.length && full.length) {
        var imageurl = msimg.css('background-image').replace('url(', '');
        imageurl = imageurl.substring(0, imageurl.length - 1);
        msimg.on('click', function () {
            /*window.open(imageurl, "_blank");*/
            if (full.css('display') == "none")
                full.css('display', 'block');
            else
                full.css('display', 'none');
        });
        full.on('click', function () {
            full.css('display', 'none');
        });
    }
});

.msbgimage
{
    width:300px;
    height:300px;
    max-width:80%;
    max-height:80%;
    border:1px solid black;
    border-radius:25px;
    -webkit-border-radius:25px;
    -moz-border-radius:25px;
    margin-right:auto;
    margin-left:auto;
    margin-top:3px;
    background-size:100% 100%;
    background-repeat:no-repeat;
    cursor:pointer;
}

.msbgimagefull
{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    cursor:pointer;
    background-color:White;
    background-size:100% 100%;
    background-repeat:no-repeat;
    display:none;
    z-index:1337;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id='msbgimage' class='msbgimage' style="background-image:url('http://www.online-image-editor.com//styles/2014/images/example_image.png')"></div>
<div id='msbgimagefull' class='msbgimagefull' style="background-image:url('http://www.online-image-editor.com//styles/2014/images/example_image.png')"></div>

它目前会将图像大小调整到设备的全屏，这意味着它会拉伸它，而不是。

我想要做的是以溢出（如果需要）显示原始大小的图像。我可以事先知道图像的大小吗？如果没有，我怎么能用它来做呢？

编辑：

我设法显示完整的图像，但现在我无法滚动它，因为它被定义为position:fixed因为它应该覆盖整个屏幕，所以你无法看到它背后的内容。我该如何修复它，以便图像有滚动条？

$(document).ready(function () {
    var msimg = $("#msbgimage");
    var full = $("#msbgimagefull");
    var full2 = $("#msbgimagefullp");
    if (msimg.length && full.length) {
        var imageurl = msimg.css('background-image').replace('url(', '');
        imageurl = imageurl.substring(0, imageurl.length - 1);
        var tmp_image = new Image();
        tmp_image.src = imageurl;
        tmp_image.onload = function () {
            full.css('width', this.width);
            full.css('height', this.height);
            msimg.on('click', function () {
                /*window.open(imageurl, "_blank");*/
                if (full2.css('display') == "none")
                    full2.css('display', 'block');
                else
                    full2.css('display', 'none');
            });
            full2.on('click', function () {
                full2.css('display', 'none');
            });
        }
    }
});

.msbgimage
{
    width:300px;
    height:300px;
    max-width:80%;
    max-height:80%;
    border:1px solid black;
    border-radius:25px;
    -webkit-border-radius:25px;
    -moz-border-radius:25px;
    margin-right:auto;
    margin-left:auto;
    margin-top:3px;
    background-size:100% 100%;
    background-repeat:no-repeat;
    cursor:pointer;
}

.msbgimagefull
{
    background-repeat:no-repeat;
    float:left;
}

.msbgimagefullp
{
    cursor:pointer;
    top:0;
    bottom:0;
    left:0;
    right:0;
    position:fixed;
    z-index:1337;
    display:none;
    background-color:White;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id='msbgimage' class='msbgimage' style="background-image:url('http://www.online-image-editor.com//styles/2014/images/example_image.png')"></div>
<div id='msbgimagefullp' class='msbgimagefullp'>
    <div id='msbgimagefull' class='msbgimagefull' style="background-image:url('http://www.online-image-editor.com//styles/2014/images/example_image.png')"></div>
</div>

Answer 1

首先，创建一个像

这样的新Image对象

var img = new Image();
img.src = 'http://www.online-image-editor.com//styles/2014/images/example_image.png';

然后，在onload

img.onload = function(){
        $('.msbgimage').css('width', this.width);
        $('.msbgimage').css('height', this.height);
    }

最后，根据图像大小，添加

background-size:cover;

$(document).ready(function () {
    var img = new Image();
    img.src = 'http://www.online-image-editor.com//styles/2014/images/example_image.png';
    img.onload = function(){
        $('.msbgimage').css('width', this.width);
        $('.msbgimage').css('height', this.heightjjjjjj);
    }
    var msimg = $("#msbgimage");
    var full = $("#msbgimagefull");
    if (msimg.length && full.length) {
        var imageurl = msimg.css('background-image').replace('url(', '');
        imageurl = imageurl.substring(0, imageurl.length - 1);
        msimg.on('click', function () {
            /*window.open(imageurl, "_blank");*/
            if (full.css('display') == "none")
                full.css('display', 'block');
            else
                full.css('display', 'none');
        });
        full.on('click', function () {
            full.css('display', 'none');
        });
    }
});

.msbgimage
{
    background-size:cover;
    width:300px;
    height:300px;
    max-width:80%;
    max-height:80%;
    border:1px solid black;
    border-radius:25px;
    -webkit-border-radius:25px;
    -moz-border-radius:25px;
    margin-right:auto;
    margin-left:auto;
    margin-top:3px;
    background-size:100% 100%;
    background-repeat:no-repeat;
    cursor:pointer;
}

.msbgimagefull
{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    cursor:pointer;
    background-color:White;
    background-size:100% 100%;
    background-repeat:no-repeat;
    display:none;
    z-index:1337;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id='msbgimage' class='msbgimage' style="background-image:url('http://www.online-image-editor.com//styles/2014/images/example_image.png')"></div>
<div id='msbgimagefull' class='msbgimagefull' style="background-image:url('http://www.online-image-editor.com//styles/2014/images/example_image.png')"></div>

Answer 2

如果您正在设置div的大小，我认为您无法做到。你可以试试这个：

background-size:auto;

或者你可能需要获得大小onload：

var img = new Image();
var imgSize = {};
img.onload = function(){
    //Set size
    resizeImg(this.width, this.height)
}


img.src = "url/to/img"

如何在不调整div大小的情况下显示完整图像？

编辑：

2 个答案: