将图像置于标签缩略图中心

Question

我有一个特定的模板非常有效，直到有一天主页中缩略图上的图像搞砸了。我甚至不知道发生了什么，我无法解决它。

看起来图像缩略图仅显示左上侧和我使用时

img.label_thumb {
    width: 100%
}

在CSS中它现在看起来很棒，但旋转木马，同样的图像看起来很糟糕。 我尝试改变旋转木马在HTML中的外观，但我不能。

网络是recapblog.com，我开始变得非常绝望了这些家伙，我尝试了我所知道的一切，我可以在互联网上找到（甚至认为不多）。 它应该如何在缩略图和轮播中查看

CSS的外观如何

我发现了之前我没有尝过的东西，但是我害怕碰到一些东西而把它弄得一团糟！ 就是这样：

// jCarouselLite插件 （函数（$）{$ fn.jCarouselLite =函数（O）{O = $延伸（{btnPrev：。空，btnNext：空，btnGo：空，鼠标滚轮：假，自动：空，速度：200，缓解： null，vertical：false，circular：true，visible：3，start：0，scroll：1，beforeStart：null，afterEnd：null}，o || {}）; return this.each（function（）{var b = false，animCss = o.vertical？“top”：“left”，sizeCss = o.vertical？“height”：“width”; var c = $（this），ul = $（“ul”，c），tLi = $（ “里”，UL），TL = tLi.size（）中，v = o.visible;若（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（ “可见性”， “可见”）; f.css（{溢出： “隐藏”，浮动：o.vertical “无”： “左”}）; ul.css（{余量：“0 ”填充 “0” 时，位置： “相对”， “列表样式类型”： “无”， “z索引”： “1”}）; c.css（{溢出： “隐藏”，位置：“relative”，“z-index”：“2”，left：“0px”}）; var g = o.vertical？height（f）：width（f）; var h = g itemLength; var 。J =克 v; f.css（{宽度：f.width（），高度：f.height（）}）; ul.css（sizeCss，H + “PX”）的CSS（animCss， - （ CURR * G））; c.css（sizeCss，J + “PX”）;如果（邻。 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＆amp;＆amp; c.mousewheel）c.mousewheel（function（e，d）{return d＆gt; 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）}; function go（a）{if（！b）{if（o.beforeStart）o.beforeStart.call（this，vis（））; if（o.circular）{if（一个＆LT = o.start-v-1）{ul.css（animCss， - （（itemLength-（v * 2））* G）+ “PX”）; CURR =一个== o.start-v-1 ？itemLength-（v * 2）-1：itemLength-（v * 2）-o.scroll} else if（a＆gt; = 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＆lt; 0 || a＆gt; itemLength-v）return ;否则curr = a} b = true; ul.animate（animCss ==“left”？{left :-( curr g）}：{top :-( curr * g）}，o.speed， o.easing，函数（）{如果（o.afterEnd）o.a​​fterEnd.call（此，VIS（））; b = FALS È}）;如果（o.circular）{$（o.btnPrev + “ ”+ o.btnNext）.removeClass（“ 无效”）;！$（（CURR-o.scroll＆℃，安培;＆安培; o.btnPrev） ||（curr + o.scroll＆gt; itemLength-v＆amp;＆amp; o.btnNext）|| []）。addClass（“disabled”）}} return false}}）}; function css（a，b）{return parseInt （$ .css（a [0]，b））|| 0};函数width（a）{return a [0] .offsetWidth + css（a，'marginLeft'）+ css（a，'marginRight'）} ; function height（a）{return a [0] .offsetHeight + css（a，'marginTop'）+ css（a，'marginBottom'）}}）（jQuery）; $（function（）{     $（ “覆盖”）。jCarouselLite（{         btnNext：“。next”，         btnPrev：“。prev”，         汽车：4000，         速度：800     }）; }）;

Answer 1

好，所以你必须删除它：

.img.label_thumb {
    width: 100%;
}

从此规则中删除width 100%，它应该可以正常运行

但如果您想保留此规则，则必须添加height : 100%以使图像适合旋转木马高度

Answer 2

您要做的是在background-size:cover;上使用background-image:url(...)和.imageContainer。

所以将#coverflow .recent-box .imageContainer中的规则更改为此

background-size:cover;
width: 395px;
height: 450px;

然后对于轮播中的每个.imageContainer，移除img代码并添加style="background-image:url('url-to-image')"。

<div class="imageContainer" style="background-image:url('http://1.bp.blogspot.com/-HhpzYfbtE9g/VPXVy5roMKI/AAAAAAAAAhg/h27Yk_7LXv4/s1600/ouat.PNG');">
    ...
</div>

然后图像将填充整个div，同时包含宽高比。