私のスライダーの高さを調整するには？

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,1200x400のように縮小してください。高さが好きになるまで画像のサイズを調整します。

Answer 2

従う

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