我正在尝试将图像放入 kwicks ul li 中,并使其宽度固定为 860px,无论 li 是否折叠。而且我无法阻止 kwicks 调整我的图像大小。
http://s1.postimg.org/gra40kmbz/kwicks.jpg
正如您在这张图片上看到的,只有第一个(展开的)li 显示我的 css 宽度属性 860px,但其他的都调整了大小。有解决办法吗?
如果我为每个 li 分配背景图像,一切正常,但我希望图像动态变化 - 由于某些原因,我无法通过 jQuery 分配 css-background 属性。所以现在我设法在每个 li 中动态插入 img 标签,但我无法让它停止调整大小。
拜托,任何建议都很好。
<ul class="kwicks-category kwicks kwicks-horizontal">
<li class="kwicks-selected slideshow1"><img width="860" src="http://localhost/nidzan/Okvir/wp-content/uploads/2014/12/Untitled-1.jpg" class="attachment-small-thumb wp-post-image" alt="Untitled-1"></li>
<li class="slideshow2"><img width="860" src="http://localhost/nidzan/Okvir/wp-content/uploads/2014/12/Untitled-1.jpg" class="attachment-small-thumb wp-post-image" alt="Untitled-1"></li>
<li class="slideshow3"><img width="860" src="http://localhost/nidzan/Okvir/wp-content/uploads/2014/12/Untitled-1.jpg" class="attachment-small-thumb wp-post-image" alt="Untitled-1"></li>
<li class="slideshow4"><img width="860" src="http://localhost/nidzan/Okvir/wp-content/uploads/2014/12/Untitled-1.jpg" class="attachment-small-thumb wp-post-image" alt="Untitled-1"></li>
</ul>
.kwicks-category li {
display: block;
height: 300px;
background: #999;
position: relative;
/* overridden by kwicks but good for when JavaScript is disabled */
margin-left: 5px;
float: left;
}
.kwicks-category li img {
position: absolute;
width: 860px;
top: 0;
left:0;
}
$(function() {
$('.kwicks-category').kwicks({
minSize : 50,
spacing : 5,
behavior: 'slideshow'
});
});
谢谢。
最佳答案
我将 background-image 和 div 包装在 li 标签中,用于 2 张图片。这是工作正常的代码:
<style type='text/css'>
.kwicks {height: 350px;}
.kwicks > li {height: 350px;}
#panel-1 { background-color: #53b388; background-image: url("***imageurl***");}
</style>
<ul class='kwicks kwicks-horizontal'>
<li id='panel-1'></li>
<li id='panel-2'><div style="width:1170px"><img src="***imageurl***"></div></li>
</ul>
关于jquery kwicks 调整我的图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27282689/