home page Image slider in mobile version looks overstretched and looks terrible

Question

The mobile version of the home page slider looks very funny, it looks stretched and doesn't fit well. I have tried setting image height to auto then it becomes small and does not fit the width and height properly. Here is the link to the project. I have tried various adjustments and the mobile version of the picture and it looks stretched and funny compared to the desktop.Please check out the link and help out

 THE CSS CODE
    /* ----------------------------------------------------------------
    [Table of contents]
    01. Global Reset
    02. Default styles
    03. Font Settings
    04. Navigation menu
    05. Home page
    06. Service page
    07. About page
    08. Testimonial page
    09. Contact page
    ------------------------------------------------------------------- */
    /*----------------------------------------------------
    @Global reset
    -----------------------------------------------------*/
    
        ``` *html, body {
          margin: 0;
          padding: 0;
          -moz-osx-font-smoothing: grayscale;
          -webkit-font-smoothing: antialiased;
          -moz-font-smoothing: antialiased;
          font-smoothing: antialiased;
        }
        
        body {
          width: 100%;
          height: 100%;
          background-color: rgba(255, 255, 255, 1.0);
          overflow-x: hidden;
        }
        
        /*----------------------------------------------------
        @Font Settings
        -----------------------------------------------------*/
        @font-face {
          src: url('../fonts/TuesdayNight-Regular.otf'),
            url('../fonts/TuesdayNight.woff'),
            url('../fonts/TuesdayNight.woff2');
          font-family: 'TuesdayNight';
          font-weight: lighter;
          font-style: lighter;
        }
        
        .fontlight {
          font-weight: lighter;
        }
        
        h1 {
          font-family: 'Nunito Sans', sans-serif;
          margin: 0;
          font-size: 30px;
        }
        
        h2 {
          font-family: 'Nunito Sans', sans-serif;
          margin: 0;
          text-transform: uppercase;
          font-size: 17px;
        }
        
        h6 {
          font-family: 'TuesdayNight';
          margin: 0;
          font-size: 30px;
        }
        
        p {
          font-family: 'Nunito Sans', sans-serif;
          font-size: 15px;
        }
        
        @media screen and (min-device-width : 250px) and (max-width: 450px) {
          h1 {
            font-size: 15px;
          }
        
          h2 {
            font-size: 12px;
          }
        
          h6 {
            font-size: 22px;
          }
        
          p {
            font-size: 12px;
          }
        }
        
        /*----------------------------------------------------
        @Default Styles
        -----------------------------------------------------*/
        .centerouter {
          display: table;
          height: 100%;
          width: 100%;
        }
        
        .centermiddle {
          display: table-cell;
          vertical-align: middle;
        }
        
        .whitetxt {
          color: rgba(255, 255, 255, 1.0);
        }
        
        .blacktxt {
          color: rgba(0, 0, 0, 1.0);
        }
        
        .goldtxt {
          color: rgba(227, 188, 154, 1.0);
        }
        
        .greytxt {
          color: rgba(128, 128, 128, 1.0);
        }
        
        .whitebg {
          background-color: rgba(255, 255, 255, 1.0);
        }
        
        .whitebg2 {
          background-color: rgba(248, 249, 250, 1.0);
        }
        
        .blackbg {
          background-color: rgba(0, 0, 0, 1.0);
        }
        
        .goldbg {
          background-color: rgba(227, 188, 154, 1.0);
        }
        
        .greybg {
          background-color: rgba(0, 0, 0, 0.01);
        }
        
        .whitegoldbg {
          background-color: rgba(227, 188, 154, 0.25);
        }
        
        .p60 {
          padding: 60px;
        }
        
        .p30 {
          padding: 30px;
        }
        
        .p20 {
          padding: 20px;
        }
        
        .p10 {
          padding: 10px;
        }
        
        .p5 {
          padding: 5px;
        }
        
        .m15 {
          margin: 15px;
        }
        
        .ml50 {
          margin-left: 50px;
        }
        
        .ml80 {
          margin-left: 80px;
        }
        
        .ml100 {
          margin-left: 100px;
        }
        
        .ml200 {
          margin-left: 200px;
        }
        
        .ml300 {
          margin-left: 300px;
        }
        
        .spaceDiv {
          height: 100px;
          width: 100%;
        }
        
        .centertext {
          text-align: center;
        }
        
        .vertical {
          vertical-align: middle;
        }
        
        .rightFloat {
          float: right;
        }
        
        .leftFloat {
          float: left;
        }
        
        /*----------------------------------------------------
        @Navigation menu
        -----------------------------------------------------*/
        .logo {
          padding: 8px;
          margin: 20px 0;
        }
        
        .navbar {
          height: 100%;
          width: 300px;
          position: fixed;
          z-index: 1;
          top: 0;
          left: 0;
        }
        
        @media screen and (min-device-width : 280px) and (max-width: 1024px) {
          #navbar {
            opacity: 0;
            visibility: hidden;
            z-index: -999;
          }
        }
        
        .navbar a {
          display: block;
          text-decoration: none;
          font-family: 'Nunito Sans', sans-serif;
          font-size: 13px;
          padding: 9px;
        }
        
        .bun01 {
          transition: all 0.5s ease;
          width: 20px;
          height: 2px;
          margin-right: 20px;
          margin-bottom: 5px;
          background-color: black;
        }
        
        .patty {
          transition: all 0.5s ease;
          width: 20px;
          height: 2px;
          margin-right: 10px;
          margin-bottom: 5px;
          background-color: black;
        }
        
        .bun02 {
          transition: all 0.5s ease;
          width: 20px;
          height: 2px;
          margin-bottom: 5px;
          background-color: black;
        }
        
        .openBurger .bun01 {
          width: 20px;
          transform: translate(0, 10px) rotate(180deg);
        }
        
        .openBurger .patty {
          width: 0;
          margin-left: 0;
          opacity: 0;
        }
        
        .openBurger .bun02 {
          width: 20px;
          transform: translate(0, -10px) rotate(-180deg);
        }
        
        .hb-nav-toggle {
          cursor: pointer;
          text-decoration: none;
        }
        
        .hb-nav-toggle {
          position: fixed;
          left: 0px;
          top: 0px;
          z-index: 9999;
          cursor: pointer;
          opacity: 1;
          visibility: hidden;
          padding: 12px 15px;
          -webkit-transition: 0.5s;
          -o-transition: 0.5s;
          transition: 0.5s;
        }
        
        @media screen and (min-width:1024px) {
          .hb-nav-toggle {
            opacity: 0;
            visibility: hidden;
          }
        }
        
        @media screen and (max-width: 768px) {
          .hb-nav-toggle {
            opacity: 1;
            visibility: visible;
          }
        }
        
        #hb-page {
          width: 100%;
          overflow: hidden;
          position: relative;
        }
        
        ul {
          padding-left: 0px;
          margin-left: 0px;
        }
        
        ul li {
          list-style: none;
          padding-left: 0px;
          margin-left: 0px;
        }
        
        .navbarFooter {
          position: relative;
          right: 0;
          left: 0;
          text-align: center;
        }
        
        .divider {
          width: 16%;
          text-align: center;
          position: relative;
          display: inline-block;
          vertical-align: middle;
          border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        }
        
        .navFContent {
          position: relative;
          margin-top: 50px;
        }
        
        /*----------------------------------------------------
        @Home Page
        -----------------------------------------------------*/
        .slideshow-container, .main {
          width: calc(100%-300px);
          height: 100vh;
          min-height: 100vh;
        }
        
        .desc-container {
          position: absolute;
          bottom: 40px;
          margin-left: 315px;
        }
        
        .desc {
          margin: auto;
          width: 450px;
          height: 250px;
          position: relative;
        }
        
        @media screen and (min-device-width : 280px) and (max-width: 450px) {
            html,body{
              overflow-x: hidden;
            }
        
          .desc-container {
            float: right;
            position: absolute;
            margin: 10%;
        
          }
        
          .desc {
            width: 200px;
            height: 150px;
            position: relative;
            margin-bottom:20%;
          }
        }
        
        .home-page-slides {
          width: 100%;
          height: 100%;
          min-height: 100%;
          -webkit-transition: all 0.5s linear;
          -moz-transition: all 0.5s linear;
          -o-transition: all 0.5s linear;
          transition: all 0.5s linear;
          position: absolute;
          top: 0;
          right: 0;
          opacity: 0;
        }
        
        .home-page-slides img {
          height:100%;
          min-height: 100%;
          width: 100%;
        }
        
        @media screen and (min-device-width : 280px) and (max-width: 450px) {
          .home-page-slides img {
            /* height:100%;
            width:auto; */
          }
        }
        
        /*----------------------------------------------------
        @Service Page
        -----------------------------------------------------*/
        #services {}
        
        .services {
          width: calc(100%-300px);
          min-height: 100vh;
          margin-top: 20px;
        }
        
        .service-container {
          margin: 0 10px 0 0;
        }
        
        @media screen and (min-device-width : 321px) and (max-width: 700px) {
          .services {
            margin-left: -300px;
          }
        
          .row {
            display: block;
          }
        }
        
        .row {
          display: flex;
          margin-left: 300px;
        }
        
        .column {
          flex: 300px;
          padding: 5px;
        }
        
        .service-box {
          height: 450px;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
        }
        
        .button {
          border: none;
          padding: 10px 20px;
          margin: 0 80px;
          text-decoration: none;
          display: inline-block;
          font-size: 12px;
          font-weight: normal;
          cursor: pointer;
        }
        
        .button:hover {
          background-color: rgba(255, 255, 255, 1.0);
          border: 1px solid rgba(227, 188, 154, 1.0);
        }
        
        .btn-two {
          margin-top: 20px;
        }
        
        /*----------------------------------------------------
        @Testimonial Page
        -----------------------------------------------------*/
        .testimonials {
          min-height: 100vh;
          /* width: calc(100%-300px); */
          margin-left: 300px;
          background-image: url(../Images/eventbg7.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
        }
        
        .sliders, .testimonial-slide-container {
          position: absolute;
          min-height: 100vh;
          width: calc(100%-300px);
        }
        
        .sliders {
          display: block;
        }
        
        .slider {
          width: 600px;
          height: 400px;
          display: flex;
          margin: 100px 200px;
        }
        
        .slide-img {
          width: 300px;
          padding: 20px;
          margin: 10px 0;
        }
        
        .slide-text {
          padding: 20px;
          width: 300px;
        }
        
        .author-text {
          text-transform: uppercase;
          font-weight: bolder;
        }
        
        .buttons {
          position: relative;
          margin: 43%;
        }
        
        .prev, .next {
          cursor: pointer;
          width: auto;
          padding: 10px;
          color: rgba(255, 255, 255, 1.0);
          font-weight: lighter;
          font-size: 20px;
          border-radius: 100%;
          user-select: none;
        }
        
        .prev:hover, .next:hover {}
        
        /*----------------------------------------------------
        @Contact Page
        -----------------------------------------------------*/
        .contact {
          min-height: 100vh;
          width: calc(100%-300px);
        }
        
        .form-box {}
        
        .form-container {
          width: calc(100%-300px);
          margin: 0 22%;
        }
        
        .form-container, .form-control {
          margin-right: 10px;
        }
        
        .form-group {
          margin-bottom: 20px;
          transition: all .3s;
          outline: none;
        }
        
        .form-label {
          display: block;
          opacity: 0;
          transition: all .3s;
          transform: translateX(-50px);
        }
        
        .form-control {
          width: 60%;
          width: 500px;
          transition: all .6s;
          line-height: 1.75rem;
          border: 1px solid rgba(227, 188, 154, 1.0);
          font-family: 'Nunito Sans', sans-serif;
          outline: none;
        }
        
        .form-control::placeholder {
          color: rgba(0, 0, 0, 0.5);
          text-align: center;
        }
        
        .form-group:focus-within {
          border-color: rgba(227, 188, 154, 1.0);
        }
        
        .textarea:focus, .form-control:invalid:focus {
          border-color: rgba(255, 0, 0, 1.0);
        }
        
        .form-control:valid:focus {
          border-color: rgba(34, 139, 34, 1.0);
        }
        
        .form-control:hover {
          transform: scale(1.1);
        }
        
        .btn {
          font-family: 'Nunito Sans', sans-serif;
          border: 1px solid rgba(227, 188, 154, 1.0);
          color: rgba(227, 188, 154, 1.0);
          background: rgba(0, 0, 0, 1.0);
          font-size: 15px;
          padding: 10px;
          border-radius: 5px;
          text-transform: uppercase;
          margin: 0 200px;
        }
        
        .btn:hover {
          background-color: rgba(255, 255, 255, 1.0);
          color: rgba(227, 188, 154, 1.0);
        }
        
        .wrap1 {}
        
        .twocolF {
          width: 50%;
        }
        
        .rowF {
          width: 45%;
          margin: 0 %;
        }```
    
    
    THE JAVASCRIPT CODE
    
        ```var slideIndex = 0;
        var slides = document.getElementsByClassName("home-page-slides");
        showSlides();
        
        function showSlides() {
          var slideLength = slides.length;
        
          // Fade in the slide
          setTimeout(function(){
            if(slideIndex == slideLength) {
              slideIndex = 0;
            }
            slides[slideIndex].classList.add("fadeIn");
          }, 10);
        
          //Fade out the SLide
          setTimeout(function(){
            if(slideIndex == slideLength) {
              slideIndex = 0;
            }
            slides[slideIndex].classList.remove("fadeIn");
          }, 3980);
        
          slideIndex++;
          setTimeout(showSlides, 4000);
        }

<!DOCTYPE html>
        <html lang="en">
        
        <head>
          <title>HB - Home Page</title>
        </head>
        
        <body>
          <!-- HOME PAGE CONTENT-->
          <div class="hb-page">
            <section id="navigation">
        
              <div class="navbar whitebg" id="navbar">
                <aside id="hb-aside">
                  <nav id="menu" class="centertext fontlight">
                    <ul>
                      <img class="logo" src="logos/mainLogo.png" alt="">
                      <li><a class="blacktxt" href="index.html">HOME</a></li>
                      <li><a class="blacktxt" href="#services">SERVICES</a></li>
                      <li><a class="blacktxt" href="html/about.html">ABOUT</a></li>
                      <li><a class="blacktxt" href="#testimonials">TESTIMONIALS</a></li>
                      <li><a class="blacktxt" href="html/portfolio.html">OUR PORTFOLIO</a></li>
                      <li><a class="blacktxt" href="html/venue.html">EXCLUSIVE VENUES</a></li>
                      <li><a class="blacktxt" href="#contact">CONTACT</a></li>
                    </ul>
        
                    <div class="navbarFooter blacktxt fontlight">
                      <div class="divider"></div>
        
                      <div class="navFContent">
                        <p>
                          +1 (646) 580-7740
                        </p>
                        <p>
                          youremail@email.com
                        </p>
                        <p>
                          New York, USA.
                        </p>
                      </div>
                    </div>
                  </nav>
                </aside>
        
              </div>
            </section>
            <section class="home-page">
              <div id="main">
                <aside id="home-page" class="">
                  <div class="slideshow-container">
        
                    <div class="home-page-slides">
                      <img class="js-fullheight" src="Images/eventbg1.jpg" style="width:100%">
                      <div class="desc-container">
                        <div class="desc p30 whitebg">
                          <h6 class="goldtxt ">Luxury Events</h6>
                          <h2 class="blacktxt ">WE CREATE BEAUTIFUL EVENTS</h2>
                          <p class="greytxt  fontlight">Join us for a “No Question too Small, Large or Outrageous” Chat about All things Bridal! This is your chance to have two industry experts answer your queries on any topic that is keeping you up at
                            night.</p>
                        </div>
                      </div>
                    </div>
        
                    <div class="home-page-slides">
                      <img class="js-fullheight" src="Images/restaurantbg1.jpg" style="width:100%">
                      <div class="desc-container">
                        <div class="desc p30 whitebg">
                          <h6 class="goldtxt ">Creating Impact</h6>
                          <h2 class="blacktxt "> STRATEGY AND SALES</h2>
                          <p class="greytxt "></p>
                        </div>
                      </div>
                    </div>
        
                    <div class="home-page-slides">
                      <img class="js-fullheight" src="Images/memorialbg1.jpg" style="width:100%">
                      <div class="desc-container">
                        <div class="desc p30 whitebg">
                          <h6 class="goldtxt ">Lasting Memories</h6>
                          <h2 class="blacktxt ">SERVING WITH LOVE</h2>
                          <p class="greytxt "></p>
                        </div>
                      </div>
                    </div>
                  </div>
                </aside>
              </div>
            </section>
        
         
            <!-- CONTACT PAGE -->
            <section id="contact">
              <div class="contact ml300">
                <h6 class="goldtxt  whitebg">we'd love to hear from you</h6>
                <h1 class="blacktxt  fontlight whitebg">CONTACT US </h1>
        
        
                <div class="form-box p10">
                  <div class="form-container  fontlight">
                    <form action="webform.php" method="POST" class="form">
                      <div class="form-group">
                        <label for="name" class="form-label">Your Name</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="Name" tabindex="1" required>
                      </div>
        
                      <div class="form-group">
                        <label for="Phone-number" class="form-label">Phone Number</label>
                        <input type="tel" class="form-control" id="phoneNumber" name="phone" placeholder="Phone Number" tabindex="2" required>
                      </div>
        
                      <div class="form-group">
                        <label for="email" class="form-label">Your Email</label>
                        <input type="email" class="form-control" id="email" name="email" placeholder="youremail@email.com" tabindex="3" required>
                      </div>
        
                      <div class="form-group">
                        <label for="subject" class="form-label">Subject</label>
                        <input type="text" class="form-control" id="subject" name="subject" placeholder="Hello There!" tabindex="4" required>
                      </div>
        
                      <div class="form-group">
                        <label for="message" class="form-label">Message</label>
                        <textarea class="form-control" rows="5" id="message" name="message" placeholder="Enter Message" tabindex="5"></textarea>
                      </div>
        
                      <div>
                        <button type="submit" class="btn fontlight">Submit</button>
                      </div>
        
        
                    </form>
                  </div>
                </div>
              </div>
            </section>
          </div>
        
          <script src="index.js" charset="utf-8"></script>
        </body>
        
        </html>

Answer 1

You need to add "width: auto" in "index.js".

var slideIndex = 0;
var slides = document.getElementsByClassName("home-page-slides");
showSlides();

function showSlides() {
  var slideLength = slides.length;

  // Fade in the slide
  setTimeout(function(){
    if(slideIndex == slideLength) {
      slideIndex = 0;
    }
    slides[slideIndex].classList.add("fadeIn");
   if($(window).width() >= 960) {
    slides[slideIndex].children("img").css("width", "auto");
   }
  }, 10);

  //Fade out the SLide
  setTimeout(function(){
    if(slideIndex == slideLength) {
      slideIndex = 0;
    }
    slides[slideIndex].classList.remove("fadeIn");
  }, 3980);

  slideIndex++;
  setTimeout(showSlides, 4000);
}

Answer 2

The p roblem is that the images are set to show at 100% height and 100% width. When the aspect ratio of the user's device (or window) is different from that of the image itself the image will get stretched one way or another.

As the user's viewport/window may be of any aspect ratio - you can't cater for absolutely every device out there let alone if the user shrinks the window on a desktop (which could end up with any aspect ratio) you need to think about showing just part of each image if necessary on the different aspect ratios.

One way of doing that is to use the object-fit spec in CSS. This will expand an image to cover the whole screen, but will avoid distortion by cropping either the left and right or the top and bottom as needed. If your images are chosen carefully, particularly if you center the images and make sure the central parts 'make sense' (e.g. aren't just blank) the site should still look OK.

I tried on your site adding object-fit: cover; to .home-page-slides img and your images looked OK on narrow (portrait) windows as well as landscape ones at all sorts of aspect ratios, but you probably want to make sure they are centred too.