jquery 数组中的响应式 img

Question

我找到了一个用 jquery 创建的图像数组。我试图让数组中的 imgs 响应。最终目标是让它们与砖石脚本配合得很好，这就是为什么我有砖石使用的通用网格类。我已经让它单独使用宽度和单独使用高度，但从不一起使用。不确定我做错了什么，而且我无法找到可靠的答案。如果我需要继续并包括砌体脚本和代码示例，我可以。

我对 jquery 或 java 不是很好，所以任何帮助将不胜感激。

taylorbingham.com/ 脚本所在的站点运行以及砌体。图片不会调整大小。

我找到的用于创建循环的原始脚本。 http://jsfiddle.net/Kz6Gk/353/

我的modifications/code https://jsfiddle.net/taylovision/gmxw6pbL/

.grid {
  background: #DDD;
}

.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-sizer,
.grid-item {
  width: 25%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  width: 100%;
}

.slideshow-block {
  width: 100%;
  background: #111;
}

a.link {
  width: 100%;
  display: block;
  z-index: 10;
}

a.link:hover {
  display: block;
}

.slides {
  width: inherit;
  z-index: 0;
  visibility: hidden;
}

.slides.active {
  width: inherit;
  visibility: visible;
}

.slides.active img {
  width: inherit;
  visibility: visible;
}

Answer 1

Blockquote
Your problem seems to be jQuery cycle uses hard-coded values and doesn't update when its parent changes its size. It's not responsive. Use Cycle 2. – Andrei Gheorghiu

Cycle 2 解决了这个问题。

必须包含以下代码才能解决：

<div class="cycle-slideshow" data-cycle-fx="none" data-cycle-auto-height="calc" data-cycle-pause-on-hover="true" data-cycle-speed="0.5s">

这取代了 .slideshow-block。如果没有 s 声明的速度，它就无法正确加载砖石。

非常感谢安德烈

jquery 数组中的响应式 img

Responsive img in a jquery array

css

arrays

jquery

responsive