css - 如何使用 CSS 创建全高度响应式水平滚动图像列表

Question

我正在使用 WordPress 和 ACF 在我的页面上显示来自自定义帖子类型的一些照片。

我希望图像都是容器的全高，但它们可能有不同的宽度(上下文摄影库)，我希望它们水平滚动

图像当前作为列表项包含在无序列表中。

我不确定如何使用 CSS 完成此操作。到目前为止，我让它们滚动，但它们的高度都不同。

我可以确保所有图片都以固定高度上传，但这并不能解决它们无法通过浏览器调整大小的问题。

JS fiddle : https://jsfiddle.net/svone2zq/9/

直播网址:http://www.mattwilkinson.co.uk/beta/

HTML代码

        if( $posts ): ?>
        <ul class="photolistul">
            <?php foreach( $posts as $post): // variable must be called         $post (IMPORTANT) ?>
                <?php setup_postdata($post); ?>

                <li class="photolistli">
                    <!-- need the right info here -->
                    <div class="photocontainer1">

                    <span><?php the_field('single_image_title'); ?></span>
                    <img class="img-responsive photo" src="<?php the_field('single_add_image') ?>" alt="<?php echo $image['alt']; ?>" />
                    </div>

                </li>
            <?php endforeach; ?>
        </ul>
        <?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
    <?php endif; ?>
</div>

CSS

.home-image-container ul.photolistul {
display: inline-block;
list-style-type: none;
overflow: scroll;
overflow-x: show;
overflow-y: hidden;
white-space: nowrap;
}
.home-image-container ul.photolistul li.photolistli {
display: inline-block;
height: 80vh;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 {
position: inherit;
max-height: 100%;
max-width: 100%;
}
 .home-image-container ul.photolistul li.photolistli .photocontainer1 img          {
position: relative;
float: left;
max-height: 100% !important;
max-width: auto;
}

Answer 1

看起来你想创建一个轮播，如果是的话，我认为最好的解决方案是 Owl Carousel 2。

我也有一个解决方案给你

http://codepen.io/Nikolaus91/pen/EKwJXw

除了使用 jQuery 之外，我没有更好的办法来设置 .stage 宽度。当您看到我的内容时，也许您会想出更好的解决方案。

var sumwidth=0;
$(".stage").children('.carousel-image-container').each(function() {
    var child = $(this);

    sumwidth+=child.outerWidth();

});
$(".stage").css({
  'min-width' : sumwidth + 25 + 'px'
});

附言25 值是随机的，不知道为什么在汇总 outerWidth 值时缺少这个 25px。也许是因为codepen...

附言-2 如果您基于图像(大部分内容)制作网站，请记住使用例如(我最喜欢的)kraken.io 压缩图像。如果您使用 wordpress 中的媒体库上传图片，请安装 wpmu dev 的 WP Smush，它会在上传时压缩图片 - 无需记住压缩图片。

最后一件重要的事情(在我看来)是使用某种延迟加载解决方案，当只有少数图像可见时一次下载多个图像是不好的方法，试试 BjLazy for wordpress。可能适合您的需求。