Question

我在codepen上经历了纯CSS滑块，我偶然发现了这个 - ＆gt; http://codepen.io/dudleystorey/pen/ehKpi

<div id="slider">
<figure>
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
<img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ibiza.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt="">
        <img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
</figure>
</div>

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite; 
}

那么如何在不使用@media查询的情况下实现响应式设计呢？它是如何设法控制图像的高度，即使没有提到高度或尺寸？

Answer 1

简单，图像的包装有500％宽度= 100％* numberOfImages。

然后使用CSS，幻灯片显示动画相同包装器的位置，每个关键帧= 100％/ numberOfSlides。

未定义高度，根据屏幕宽度按比例调整高度（您看到的20％=包装器的宽度/数量偏离滑块=屏幕宽度的100％））

高度方面的最终图像/容器尺寸可以通过指定宽度本身来控制，就像通过这种方法一样，高度和宽度相互关联。

没有媒体查询，这是如何响应的

1 个答案: