html - 如何调整 slider 的高度？

Question

我的 slider 对我来说太大了。我想调整这个大 slider 。 height 似乎无法解决问题。

slider 预览:

我的 CSS 代码，它似乎在 styles.css 的 sliderSection 部分。

#sliderSection{
  float: left;
  display: inline;
  width: 100%;
 /* height: 530px;*/
  overflow: hidden;
  margin-top: 77px; 
}

编辑:这里是 HTML 代码和 CSS:

 <section id="sliderSection">            
    <div class="mainslider_area">
      <!-- Start super slider -->
      <div id="slides">
        <ul class="slides-container">
          <!-- Start single slider-->
          <li>
            <img src="img/slider/2.jpg" alt="img">
            <div class="slider_caption">
              <h2><span>D. Midland</span> Pacific Hotel</h2>
              <p style="color: #000;">Located in the heart of <span>Bauan, Batangas.</span></p>
              <a class="slider_btn" href="#">Read More</a>
            </div>
          </li> 
          <!-- Start single slider-->           
          <li>
            <img src="img/slider/2.jpg" alt="img">
             <div class="slider_caption">
              <h2><span>Online</span> Reservation? <br>We have it covered!</h2>
              <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search</p>
              <a class="slider_btn" href="#">Read More</a>
            </div>
            </li>
          <!-- Start single slider-->
          <li>
            <img src="img/slider/2.jpg" alt="img">
             <div class="slider_caption">
              <h2><span>Beausiness</span> & Corporate</h2>
              <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search</p>
              <a class="slider_btn" href="#">Read More</a>
            </div>
           </li>
        </ul>
        <nav class="slides-navigation">
          <a href="#" class="next"></a>
          <a href="#" class="prev"></a>
        </nav>
      </div>
    </div>
  </div>    
  </section>
  <!-- End slider section -->

  <!-- Start Service area -->
  <section id="service">
    <div class="container">
      <div class="col-lg-12 col-md-12 col-sm-12">
        <div class="service_area">
          <div class="service_title">
            <hr>
            <h2>Amenities and Services</h2>
            <p>Experience the hotel that is a place like home.</p>
          </div>
          <ul class="service_nav wow flipInX">
            <li>
              <a class="service_icon" href="#"><i class="fa fa-users"></i></a>
              <h2>Online reservation powered</h2>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
              <a class="read_more" href="#">read more<i class="fa fa-long-arrow-right"></i></a>
            </li>
           <li>
              <a class="service_icon" href="#"><i class="fa fa-gears"></i></a>
              <h2>Affordable Prices!</h2>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
              <a class="read_more" href="#">read more<i class="fa fa-long-arrow-right"></i></a>
            </li>
            <li>
              <a class="service_icon" href="#"><i class="fa fa-support"></i></a>
              <h2>A comfortable place to stay</h2>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
              <a class="read_more" href="#">read more<i class="fa fa-long-arrow-right"></i></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>
  <!-- End Service area -->

如有任何帮助，我们将不胜感激。

Answer 1

这是 Outlook 主题的文档，看起来像您正在使用的主题，请阅读:WPFreeware Outlook theme documentation for Slider setup

它建议您确保所有图片都相同。图像是 1920 x 900，我想如果你想要更短，你可以将比例从 2:1(这是 1920 x 900 尺寸)降低到 3:2、1200x400。调整图像的大小，直到你喜欢的高度。