All of our stock themes have featured content sliders that behave slightly differently, but the one thing that is the same with all of them is that the photos never get distorted or squished due to a change in aspect ratio. So for example, the theme that you are using has a featured content slider container where the height of the image remains constant and the width of the viewable part of the image increases and decreases as the browser window width increases and decreases. Instead of trying to fit the entire width of the photo in that narrow frame and changing the aspect ratio, it just displays the middle section of the photo and crops the edges.

Some of the other themes maintain the full width of the photo and crop off the top and bottom of the image as it is stretched beyond the aspect ratio of the photo. And some of the themes scale down the image proportionately, not cropping the image at all. The benefit of this is that your image does not get cropped, but the downside is that the featured content slider container may change in height as it scrolls through the images if they do not have the same aspect ratio, causing the content below the slider to jump around your page as the slider scrolls.

If you are using a custom theme, you can always modify the _features.html file, which is responsible for displaying that featured content slider.  Specifically, I recommend copying the _features.html file from a different theme and pasting it into your current custom theme's _features.html file, replacing what was already there. This would require you switching to that stock theme, creating a new custom theme based off of that stock theme, copying the _features.html file and then switching back to your original custom theme.

If you'd like to preview the different themes to see which one you want to borrow the code from, try using Preview Mode!

Pro-tip: The Aware theme has the last featured content slider that I was mentioning, which sounds like the one that you prefer using.

If you are starting from the Publish theme and want the behavior of the Aware featured content sliders, the modification is a bit more complex. You will need to adjust 3 different files in total. 

Click on each file name below to see a Diffchecker page displaying the original version of the file on the left and the modified version on the right:

• theme.scss
• _features.html
• tablet-and-desktop.scss