如何使此滑块脚本能够显示确切的图像宽度和高度

Question

I have two scripts to show the top slider on my template:

    //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.
});

I used the above scripts to display the top slider, but

The problem is that the images show as stretched, or called it no perfect dimension it has not the original size to display in top big slide, it show strech type.

Screenshot 1

Screenshot 2

Site Url

Now what to do to get the best width and height dimension as the original image size, i hope there is something wrong at the first script, please help me anyone to get solve this issue. thanks.

OR

Give me a another script to add in template only for top slier images to show the width and height in exact dimension like you see in the screenshot the below images which show perfect dimension.

Answer 1

It's a CSS problem easily set height to auto

 ul.abt-sidebar-slider img { width: 100%; height: auto; } 

You can set width to auto too if you want the same width and height

Answer 2

Images are very hard to style correctly. Can you try to use something like this:

<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');
}

Answer 3

I use a script like this to get the natural size of an image

var width;
var height
var img = new Image();
img.onload = function ()
{
    width = img.naturalWidth;
    height = img.naturalHeight;
}
img.src = "yourImagePath";

you can now keep the ratio easily...

ratio = width/height