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

Question

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

 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% 的宽度显示。当用户设备（或窗口）的纵横比与图像本身的纵横比不同时，图像将以一种或另一种方式被拉伸。

由于用户的视口/窗口可能具有任何纵横比 - 您无法完全满足所有设备的需求，更不用说用户缩小桌面上的窗口（最终可能具有任何纵横比）您需要如果需要，可以考虑在不同的纵横比上仅显示每张图像的一部分。

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

我尝试在您的网站上添加 适合对象：封面； 到 .home-page-slides img 并且您的图像在窄（纵向）窗口以及各种纵横比的横向窗口上看起来都不错，但您可能希望确保它们也居中。

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