如何在HTML中调整Slider Revolution滑块的高度？

你的滑块当前是全屏状态，根源是标签里的full-screen和fullscreen-container类在起作用，按以下步骤修改就能缩小高度：

• 移除全屏类
  先把两个全屏相关的类删掉：

  1. 把<section>标签里的full-screen类移除，修改后：

     <section id="slider" class="slider-element revslider-wrap clearix">
     

  2. 把<div id="rev_slider_10_1_wrapper">里的fullscreen-container类移除，修改后：

     <div id="rev_slider_10_1_wrapper" class="rev_slider_wrapper" data-alias="fashion1" style="background-color:transparent;padding:0px;">
     

• 设置固定高度
  给滑块容器添加自定义高度，直接在rev_slider_wrapper的style属性里加height: 600px;（数值可以根据你的需求调整，比如400px、500px），示例：

  <div id="rev_slider_10_1_wrapper" class="rev_slider_wrapper" data-alias="fashion1" style="background-color:transparent;padding:0px;height:600px;">
  

  或者如果主题有自定义CSS文件，也可以在里面写：

  #rev_slider_10_1_wrapper {
      height: 600px !important;
  }
  

  加!important是为了确保样式能覆盖默认设置。

• 调整内容对齐（可选）
  高度改小后，可能需要调整背景图和文字图层的位置：

  • 背景图：把<img>标签的data-bgposition从center center改成top center，避免图片的关键部分被裁剪
  • 文字图层：检查每个tp-caption的data-y和data-voffset参数，比如把data-voffset的数值调小，确保文字在新的滑块高度里显示合适

内容的提问来源于stack exchange，提问作者wrox