Javascript 如何使此滑块脚本能够显示精确的图像宽度和高度
我有两个脚本来显示模板上的顶部滑块:Javascript 如何使此滑块脚本能够显示精确的图像宽度和高度,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有两个脚本来显示模板上的顶部滑块: //Top slider script function FeaturedPostSide(a) { (function (e) { var h = { blogURL: "", MaxPost: 4, idcontaint: "", ImageSize: 100,
//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)
};
我使用上面的脚本来显示顶部滑块,但是
问题在于图像显示为拉伸,或者称之为无完美尺寸,它没有在顶部大幻灯片中显示的原始尺寸,它显示的是拉伸类型
现在该怎么做才能得到最佳的宽度和高度尺寸作为原始图像的大小,我希望在第一个脚本中有一些错误,请帮助我解决这个问题。谢谢
或
请给我另一个脚本,以便仅为顶部切片图像添加模板,以精确的尺寸显示宽度和高度,就像您在屏幕截图中看到的下面显示完美尺寸的图像一样。这是一个CSS问题,很容易将
高度设置为自动
ul.abt-sidebar-slider img{
宽度:100%;
高度:自动;
}
图像很难正确设置样式。
你能试着用这样的方法吗:
<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');
}
.image容器{
高度:所需高度;
宽度:所需的宽度;
背景重复:无重复;
背景位置:50%50%;
背景尺寸:包含;
背景:url(“照片路径”);
}
我使用这样的脚本来获得图像的自然大小
var width;
var height
var img = new Image();
img.onload = function ()
{
width = img.naturalWidth;
height = img.naturalHeight;
}
img.src = "yourImagePath";
您现在可以轻松地保持该比率
ratio = width/height
我已经在firebug online上添加了你的风格,但是它是这样的:检查这个屏幕截图:它有一半,我需要将它显示为原始图像,就像你在我箭头所示的屏幕截图下面的图像中看到的那样。它有一个完美的维度来显示。它很好,但是它仍然需要一些定制来获得准确的结果,但这不是一个css定制来实现的,这都是关于javascript的,它可以将自然图像大小设置为任何帧…就像你看到的一样,这两个图像之间仍然存在差异…屏幕截图:我可以将高度设置为这样调整大小,但这不是好方法,通过java可以获得完美的维度。id或类在哪里,因此它只反映顶部滑块图像…因为在我的模板中使用的不同位置上也有许多图像。因此,如何获得所需id或类的脚本,以便只处理这些图像。谢谢。我不太明白您的意思…您可以通过id或类获取元素,比如var x=document.getElementsByCassName(“示例”)@alexa,to例如:这是要添加您的代码,我是否应该替换img.src=“yourImagePath”;用我的身份证包装?对于这种情况,var src=document.getElementById(“包装器”).childNodes[0].src;将工作你可以在这里检查小提琴你和microsmsm用户的最新更新都帮助了我很多,我通过你的最新脚本和他的建议解决了这个问题。谢谢。这不是css的情况,我很了解css。使用java相当复杂。谢谢你的意见。
ratio = width/height