Question

我有一个对我来说太大的滑块。我想调整这个大滑块。似乎height无法修复它。

滑块预览：

我的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,100x400。调整图像的大小直到您喜欢高度。

Answer 2

您可以将高度设置为滑块的图像，如下所示

<style>section#sliderSection li img{height:500px;}</style>

如何调整滑块的高度？

2 个答案: