Scroller Image Slider Sizing adaptation

Hello guys,

I have added some code that allows the website to scroll through some logos for me and its working great - I was wondering if someone is able to help me adjust the sizing and width?

Here's how it looks currently: https://gyazo.com/3f62022bd16f2bc46b57b493171de45a

As you can see below was the old style with much smaller logo sizes - I was wondering how I can adapt the code below to scale the images down so they are slightly smaller on the page and don't take up so much height. I've tried adjust the height values but this just crops the images instead of scaling them down.

Code: 

//IMAGE SLIDER//

.slider {
  width: 105%;
  overflow: hidden;
}

.slider .slider-image {
  background-image: url(https://static1.squarespace.com/static/61373ecf653d655103320d70/t/6179388ffe54b13e769fab63/1635334288995/Logo+Strio.png);
  width: auto;
  height: 325px;
  background-size: 11700px 325px;
  animation: slide 100s linear infinite;
}

@keyframes slide {
  from {background-position-x: 0px;}
  to {background-position-x: -11700px}
}

Full width Adjustment - I also would like to ensure this image slider spans the full width of the page left and right. I adjust the width to 105% which has made it full width on the right side of the page but if you see the example below, you can see the left width is cropping the image: https://gyazo.com/7fae76d26deeb549d7b37a81f997bd8e

Any advice would be appreciated 🙂

Hi,

What is site url?