主页移动版本中的图像滑块看起来过度拉伸并且看起来很糟糕

Question

移动版的首页滑块看起来很搞笑，看起来拉长了，不太合身。我尝试将图像高度设置为自动然后它变小并且不适合宽度和高度。这里是link to the project。我已经尝试了各种调整和移动版本的图片，与 desktop.Please 相比，它看起来拉伸和有趣查看 link 并帮助

 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

问题是图像设置为以 100% 高度和 100% 宽度显示。当用户设备的纵横比（或 window）与图像本身的纵横比不同时，图像将以一种或另一种方式拉伸。

由于用户的 viewport/window 可能具有任何纵横比 - 你不能绝对满足所有设备的需求，更不用说如果用户在桌面上缩小 window（这可能会结束任何纵横比）你需要考虑在不同的纵横比上只显示每张图片的一部分。

一种方法是使用 CSS 中的 object-fit 规范。这将扩展图像以覆盖整个屏幕，但会根据需要裁剪左右或顶部和底部以避免失真。如果您仔细选择图片，特别是如果您将图片居中并确保中心部分 'make sense'（例如不只是空白），网站应该仍然看起来不错。

我试过在你的网站上添加 object-fit：封面； .home-page-slides img 并且您的图像在窄（纵向）windows 以及各种宽高比的横向图像上看起来都不错，但您可能想确保它们也居中。

Answer 2

您需要在“index.js”中添加“width: auto”。

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);
}

主页移动版本中的图像滑块看起来过度拉伸并且看起来很糟糕

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

javascript

css

mobile

image

responsive