我有一个特定的模板,在某天主页的缩略图上的图像弄乱之前,它确实工作得很好。我什至不知道发生了什么,我无法解决。

看起来图像缩略图仅显示左上方,当我使用

img.label_thumb {
    width: 100%
}


在CSS中看起来现在很棒,但是轮播,带有相同的图像,看上去很糟糕。
我尝试更改轮播在HTML中的显示方式,但我做不到。

网络是recapblog.com,我在这里开始变得非常绝望,我尝试了我所知道的一切,并且可以在Internet上找到(甚至认为不多)。
缩略图和轮播中的外观



CSS的外观



我发现了我以前从未尝试过的东西,但是我害怕碰东西并弄乱它!
就是这个:

// jCarouselLite插件
(function($){$。fn.jCarouselLite = function(o){o = $。extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing: null,vertical:false,circular:true,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null},o || {});返回this.each(function(){var b = false,animCss = o.vertical?“ top”:“ left”,sizeCss = o.vertical?“ height”:“ width”; var c = $(this),ul = $(“ ul”,c),tLi = $(“ li”,ul),tl = tLi.size(),v = o.visible; if(o.circular){ul.prepend(tLi.slice(tl-v-1 + 1).clone( ))。append(tLi.slice(0,v).clone()); o.start + = v} var f = $(“ li”,ul),itemLength = f.size(),curr = o.start ; c.css(“ visibility”,“ visible”); f.css({overflow:“ hidden”,float:o.vertical?“ none”:“ left”})); ul.css({margin:“ 0 “,padding:” 0“,position:” relative“,” list-style-type“:” none“,” z-index“:” 1“}); c.css({overflow:” hidden“,position ::“ relative”,“ z-index”:“ 2”,left:“ 0px”}); var g = o.vertical?height(f):width(f); var h = gitemLength; var j = gv; f.css({width:f.width(),height:f.height()}); ul.css(sizeCss,h +“ px”)。css(animCss,-(curr * g)); c.css (sizeCss,j +“ px”); if(o.btnPrev)$ (o.btnPrev).click(function(){return go(curr-o.scroll)}); if(o.btnNext)$(o.btnNext).click(function(){return go(curr + o。 scroll)}); if(o.btnGo)$。each(o.btnGo,function(i,a){$(a).click(function(){return go(o.circular?o.visible + i: i)})});)(if(o.mouseWheel && c.mousewheel)c.mousewheel(function(e,d){return d> 0?go(curr-o.scroll):go(curr + o.scroll)})) ; if(o.auto)setInterval(function(){go(curr + o.scroll)},o.auto + o.speed); function vis(){return f.slice(curr).slice(0,v )};函数go(a){if(!b){if(o.beforeStart)o.beforeStart.call(this,vis()); if(o.circular){if(a = itemLength-v + 1){ul.css(animCss,-((v)g)+“ px”); curr = a == itemLength-v + 1?v + 1:v + o.scroll} else curr = a} else {if(a itemLength-v)return; else curr = a} b = true; ul.animate(animCss ==“ left”?{left :-( currg)}:{top :-( curr * g)},o.speed,o.easing,function(){if(o.afterEnd)o .afterEnd.call(this,vis()); b = false}); if(!o.circular){$(o.btnPrev +“,” + o.btn Next).removeClass(“ disabled”); $((curr-o.scroll itemLength-v && o.btnNext)|| [])。addClass(“ disabled”) }}返回false}})};函数css(a,b){return parseInt($。css(a [0],b))|| 0};函数width(a){返回a [0] .offsetWidth + css(a,'marginLeft')+ css(a,'marginRight')};函数高度(a){返回a [0] .offsetHeight + css(a,'marginTop')+ css(a,'marginBottom' )}})(jQuery);
$(function(){
    $(“。cover”)。jCarouselLite({
        btnNext:“。next”,
        btnPrev:“。prev”,
        自动:4000,
        速度:800
    });
});

最佳答案

确定,所以您必须删除此:

.img.label_thumb {
    width: 100%;
}


从此规则中删除width 100%,它应该可以正常工作

但是如果您想保留此规则,则必须添加height : 100%以使图像适合轮播高度

10-05 20:36
查看更多