当前位置: 首页 > 知识库问答 >
问题:

滑块(+ACF)所有图像高度相同

冯阳华
2023-03-14

我知道这个问题已经问过很多次了,但都没有解决我的问题。我有一个滑块(与ACF pro)和我只是希望所有我的图像是相同的高度(这意味着:所有的肖像img有相同的高度(并改变他们的宽度),作为一个景观img)。

这里是我当前的代码:HTML

<section>
  <div>
    <?php $images = get_field('portfolio_images'); ?>
    <?php if( $images ): ?>
      <div class="multiple-items">
        <?php foreach( $images as $image ): ?>
          <img src="<?php echo $image['url']; ?>" />
        <?php endforeach; ?>
      </div>
    <?php endif; ?>
  </div>

  <div class="text-container">
    <a>test</a>
  </div>
</section>

CSS

section {
  width: 80%;
  height: auto;
}

.slick-slide {
    width: 50vw;
    height: 50%;
    box-sizing: border-box;
}

JS

  <script>
  jQuery(document).ready(function($){
    $('.multiple-items').slick({
      variableWidth: true,
      centerMode: true,
      slidesToShow: 1,
      slidesToScroll: 1,
    });
  });
  </script>

Slick网站给出的例子是:

在此输入图像说明

共有1个答案

诸葛嘉熙
2023-03-14
.multiple-items img{
height:100vw;
max-height:100vw !important;
width:auto;
}
 类似资料:
  • 我有一个小问题,一个小jQuery脚本,我的幻灯片图像。该脚本本身工作得非常好,其目的是在图像之间滚动,实际上是“淡入淡出”,这是一部经典之作。 问题是,如果我想将它用于页面上的另一个块,那么它将不再正常工作。。问题当然出在id上,但无法解决。 这是脚本: 有什么想法吗?谢谢大家:)

  • 问题内容: 我正在尝试创建由产品照片组成的图像墙。不幸的是,它们都具有不同的高度和宽度。如何使用CSS使所有图像看起来都一样大小?最好是100 x 100。 我正在考虑做一个高度和宽度为100px的div,然后再进行一些填充。不知道该怎么做。 我该怎么做? 问题答案:

  • 问题内容: 有一行可以一次只容纳三个图像,但是我在服务器中有几个图像,我想全部取走。所以在这种情况下,我需要图像滑块。 让说,有10幅图像,例如和行和它包含只有三个非常久远。我想要的是?单击slider_button时,图像应沿按钮方向一一向前。假设,如果我点击则应该行,而不是。因此,有一幅图像被转发到左方向,而另一幅新图像被提取为 请给我一些提示。我想从服务器获取图像会更有用,对吗? 问题答案:

  • 我试图做一个面板的响应性设计,由一个图像和另一个容器组成,内部有自己的元素,两个并排。 我有一个父div,里面有一个img和另一个div标签。这两个子标记是浮动块,宽度为%,可以工作。 问题是,当我收缩页面时,img会收缩以遵守%width规则,其高度也会收缩,并且应该保持这种方式,但是侧面的div不会将其高度更改为与同级图像相同。 我将它们包裹在另一个div中,并将内部div放在高处:100%希

  • 我在用滑块。我在页面上有三个滑块,它们都有相同的类和滑块选项。然而,我想要三个不同的滑块‘自动播放速度’选项或添加随机延迟的每一个所有三个滑块,而不是创建不同的类别为每一个滑块。有可能吗? 三张具有相同类名的幻灯片: https://jsfidle.net/x78y143f/1/ null null 预期结果(三种不同的“自动播放速度”选项): https://jsfidle.net/x78y14

  • 我需要帮助。我有一个简单的jQuery滑块,它工作得很好,但我无法弄清楚这种情况:例如,如果我有4个图像,当我到达第四个图像时,我希望能够通过单击'Next'按钮从第四个图像转到第一个图像。我怎么能那样做? null null