使用 html 和 css 创建移动响应式图像滑块

Question

我用html和css做了一个图像滑块。但问题是，它不是移动响应的，它的高度和宽度不会根据移动屏幕尺寸而变化。我的示例代码如下：

<section id="home" class="divider">
<div class="container-fluid p-0">
<!-- START REVOLUTION SLIDER 5.0.7 -->
<div id="rev_slider_home_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="news-gallery34" style="margin:0px auto;background-color:#ffffff;padding:0px;margin-top:0px;margin-bottom:0px;">
<!-- START REVOLUTION SLIDER 5.0.7 fullwidth mode -->
<div id="rev_slider_home" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.0.7">
<ul>
<!-- SLIDE 1 -->
<li data-index="rs-1" data-transition="slidingoverlayhorizontal" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="images/bg/bg12.jpg" data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off" data-title="Make an Impact">
<!-- MAIN IMAGE -->
<img src="images/bg/bg12.jpg" alt="" data-bgposition="top 40%" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme rs-parallaxlevel-0" 
id="slide-1-layer-1" 
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" 
data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" 
data-width="full"
data-height="full"
data-whitespace="normal"
data-transform_idle="o:1;"
data-transform_in="opacity:0;s:1500;e:Power3.easeInOut;" 
data-transform_out="opacity:0;s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" 
data-start="1000" 
data-basealign="slide" 
data-responsive_offset="on" 
style="z-index: 5;background-color:rgba(0, 0, 0, 0.35);border-color:rgba(0, 0, 0, 1.00);"> 
</div>
</li>
</ul>
<div class="tp-bannertimer tp-bottom" style="height: 5px; background-color: rgba(166, 216, 236, 1.00);"></div>
</div>
</div>
</div>
</section>

有没有办法使其移动响应，以便幻灯片的高度和宽度适合移动屏幕尺寸？

Answer 1

最好的办法是使用媒体查询重新制作图像滑块，这样您就可以复制和粘贴预先存在的代码并针对移动/平板电脑设备进行调整。

这是一个教程，介绍了媒体查询所需的一切。

CSS 媒体查询