javascript - 如何使这个 slider 脚本能够显示准确的图像宽度和高度

Question

我有两个脚本来显示模板上的顶部 slider :

    //Top slider script
    function FeaturedPostSide(a) {
        (function (e) {
            var h = {
                blogURL: "",
                MaxPost: 4,
                idcontaint: "",
                ImageSize: 100,
                interval: 5000,
                autoplay: false,
                loadingClass: "loadingxx",
                pBlank: "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",
                MonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                tagName: false
            };
            h = e.extend({}, h, a);
            var g = e(h.idcontaint);
            var d = h.MaxPost * 200;
            g.html('<div class="sliderx"><ul class="abt-sidebar-slider"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');
            var f = function (w) {
                var q,
                k,
                m,
                u,
                x,
                p,
                t,
                v,
                r,
                l = "",
                s = w.feed.entry;
                for (var o = 0; o < s.length; o++) {
                    for (var n = 0; n < s[o].link.length; n++) {
                        if (s[o].link[n].rel == "alternate") {
                            q = s[o].link[n].href;
                            break
                        }
                    }
                    if ("media$thumbnail" in s[o]) {
                        u = s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s" + h.ImageSize + "-c")
                    } else {
                        u = h.pBlank.replace(/\/s[0-9]+(\-c|\/)/, "/s" + h.ImageSize + "$1")
                    }
                    k = s[o].title.$t;
                    r = s[o].published.$t.substring(0, 10);
                    m = s[o].author[0].name.$t;
                    x = r.substring(0, 4);
                    p = r.substring(5, 7);
                    t = r.substring(8, 10);
                    v = h.MonthNames[parseInt(p, 10) - 1];
                    l += '<li><a target="_blank" href="' + q + '"><div class="overlayx"></div><img class="random" src="' + u + '"/><h4>' + k + '</h4></a><div class="label_text"><span class="date"><span class="dd">' + t + '</span> <span class="dm">' + v + '</span> <span class="dy">' + x + '</span></span> <span class="autname">' + m + "</span></div></li>"
                }
                e("ul", g).append(l).addClass(h.loadingClass)
            };
            var c = function () {
                e(h.idcontaint + " .nextx").click()
            };
            var b = function () {
                e.get((h.blogURL === "" ? window.location.protocol + "//" + window.location.host : h.blogURL) + "/feeds/posts/summary" + (h.tagName === false ? "" : "/-/" + h.tagName) + "?max-results=" + h.MaxPost + "&orderby=published&alt=json-in-script", f, "jsonp");
                setTimeout(function () {
                    e(h.idcontaint + " .prevx").click(function () {
                        e(h.idcontaint + " .sliderx li:first").before(e(h.idcontaint + " .sliderx li:last"));
                        return false
                    });
                    e(h.idcontaint + " .nextx").click(function () {
                        e(h.idcontaint + " .sliderx li:last").after(e(h.idcontaint + " .sliderx li:first"));
                        return false
                    });
                    if (h.autoplay) {
                        var i = h.interval;
                        var j = setInterval(c, i);
                        e(h.idcontaint + " .sliderx li:first").before(e(h.idcontaint + " .sliderx li:last"));
                        e(h.idcontaint + " .sliderx").hover(function () {
                            clearInterval(j)
                        }, function () {
                            j = setInterval(c, i)
                        })
                    }
                    e("ul", g).removeClass(h.loadingClass)
                }, d)
            };
            e(document).ready(b)
        })(jQuery)
    };

FeaturedPostSide({
    MaxPost: 3,
    idcontaint: "#featuredpostside",
    ImageSize: 600,
    interval: 5000, // speed up slider
    autoplay: false, // stop auto slider
    tagName: "Feature" // Feature is label name to display posts from it.
});

我使用上面的脚本来显示顶部 slider ，但是

问题是图像显示为拉伸(stretch)的，或者称其为不完美的尺寸，它没有在顶部大幻灯片中显示的原始尺寸，它显示拉伸(stretch)类型。

Screenshot 1

Screenshot 2

Site Url

现在如何获得最佳宽度和高度尺寸作为原始图像尺寸，我希望第一个脚本有问题，请帮助我解决这个问题。谢谢。

或

给我另一个脚本，仅在顶部幻灯片图像的模板中添加，以显示精确尺寸的宽度和高度，就像您在屏幕截图中看到的显示完美尺寸的下面的图像一样。

Answer 1

图像很难正确设置样式。 你能尝试使用这样的东西吗:

<div class="image-container"></div>

.image-container {    
    height: desired height;
    width: desired width;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    background: url('photo path');
}