Question

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

我希望这些图像都是容器的整个高度，但它们可能有不同的宽度（上下文摄影库），我希望它们能够水平滚动

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

我不确定如何使用CSS实现这一目标。到目前为止，我让它们滚动，但它们都是不同的高度。

我可以确保所有图片都是以固定高度上传的，但这并不能解决他们没有使用浏览器调整大小的问题。

实时网址：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

看起来你想要创建一个旋转木马，如果是这样的话，我认为最好的解决方案是猫头鹰旋转木马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'
});

P.S。 25值是随机的，不知道为什么当outerWidth值被sumarized时这25px丢失了。也许是因为代码...

P.S。 -2如果您正在制作基于图像（大部分内容）的网站，请记住使用例如（我最喜欢的） kraken.io 来压缩图像。如果您使用wordpress安装 WP Smush by wpmu dev 使用媒体库上传图像，它将在上传时压缩图像 - 无需记住压缩图像。

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

Answer 2

在你的jsfiddle中使用css我想出了这个似乎可以解决问题的方法。

.home-image-container ul.photolistul {
  display: inline-block;
  list-style-type: none;
  overflow: scroll;
  overflow-x: show;
  overflow-y: hidden;
  white-space: nowrap;
}
.img-resposnive {
  height: 100%;
 width: 100%;
}
.home-image-container ul.photolistul li.photolistli {
  display: inline-block;

}
.home-image-container ul.photolistul li.photolistli .photocontainer1 {
  height: 400px;
  max-height: 600px;
  min-height: 200px;

}
.home-image-container ul.photolistul li.photolistli .photocontainer1 {
  position: relative;
  float: left;
}

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

2 个答案: