How to set image width and height in Swiper?

Question

The page has a Swiper slider. The swiper-slide contains an image width: 660px and height: 600px. Their location: two slides in the center and on the sides of the halves of the slides. How can I put them in such an arrangement and size so that the pictures are not compressed. Below is the layout diagram and code.

const swiper = new Swiper(".main-slider", {
  loop: true,
});

.main-slider .swiper-slide img {
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
  border-radius: 40px;
}

<div class="slider-container swiper main-slider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="./img/slider-1.png" alt="">
    </div>
    <div class="swiper-slide"><img src="./img/slider-2.png" alt=""></div>
    <div class="swiper-slide"><img src="./img/slider-3.png" alt=""></div>
    <div class="swiper-slide"><img src="./img/slider-4.png" alt=""></div>
  </div>
</div>