jquery kwicks 调整我的图像大小答案

【问题标题】：jquery kwicks resizes my imagejquery kwicks 调整我的图像大小
【发布时间】：2014-12-03 22:12:55
【问题描述】：

我正在尝试将图像放入 kwicks ul li 中，并使其宽度固定在 860px 上，无论 li 是否折叠。而且我无法阻止 kwicks 调整我的图像大小。

http://s1.postimg.org/gra40kmbz/kwicks.jpg

正如您在这张图片上看到的，只有第一个（展开的）li 显示了我的 css 宽度属性 860px，但其他的被调整了大小。有办法解决吗？

如果我将 background-image 分配给每个 li，一切正常，但我希望图像动态更改 - 由于某种原因，我无法分配 css-background 属性 vie jQuery。所以现在我设法在每个 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'
    });
});

谢谢。

【问题讨论】：

标签： jquery css resize kwicks

【解决方案1】：

我将背景图像和 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>

【讨论】：

【解决方案2】：

删除 JS 代码中的minSize，然后重试。

$(function() {
    $('.kwicks-category').kwicks({
        spacing : 5,
        behavior: 'slideshow'
    });
});

【讨论】：

minSize 决定了 li 折叠时的宽度，所以无法移除。还是谢谢你
好吧，试试 minSize: '100%'

【解决方案3】：

我实际上在发布问题 15 分钟后找到了解决方案。

我所做的是用 div 包装所有 img 标签并为其分配 width 属性。

 .kwicks-category li img {  
  width: 860px; 
 }

.kwicks-category .img-wrap {
 position: absolute;
 top: 0;
 left:0;
 width: 860px;
 }

像魅力一样工作，li 标签内的所有图像都不会调整大小，我仍然能够将图像动态插入 kwicks 幻灯片。

【讨论】：