I am using WordPress and ACF to display some photographs from custom post types on my page.
I would like the images to all be the full height of the container but they may have different widths (context photography gallery) and I would like them to scroll horizontally
the images are currently contained as list items in an unordered list.
Im unsure how to accomplish this with CSS. so far I have them scrolling, but they are all different heights.
i could make sure the images are all just uploaded with a fixed height but that doesn’t solve the problem of them not resizing with the browser.
JS Fiddle:
https://jsfiddle.net/svone2zq/9/
Live url: http://www.mattwilkinson.co.uk/beta/
HTML CODE
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;
}
it looks like you want to create a carousel, if so I think the best solution would be Owl Carousel 2 here.
I have a solution for you too
http://codepen.io/Nikolaus91/pen/EKwJXw
I didn’t have a better idea to set .stage width other way than using jQuery. Maybe you will came up with a better solution when you will see mine.
P.S. 25 value is random, don’t know why this 25px is missing when outerWidth value is sumarized. Maybe it’s because of codepen…
P.S. -2 If you are making website based on images (majority of the content) remeber to compress images using for example (my favourite) kraken.io. If you are uploading images using media library in wordpress install WP Smush by wpmu dev it will compress images when uploaded – no need to remeber about compressing images.
The last important thing (in my opinion) is to use some kind of lazy loading solution, downloading multiple images at once when only minority is visible is bad approach, try BjLazy for wordpress. Might suit your needs.
Working with the css in you jsfiddle I came up with this which seems to do the trick.