Question

我正在尝试使用我的导航栏下的幻灯片构建一个小网站并尝试使用flexbox。

所以我希望这个幻灯片放映是“响应式的”，因为当我修改浏览器的宽度和高度时，只有div的宽度增加（而不是高度）。这是我幻灯片的结构：

<div class="slideshow">
    <ul>
        <li><img src="http://placehold.it/1901x630"></li>
        <li><img src="http://placehold.it/1902x630"></li>
        <li><img src="http://placehold.it/1903x630"></li>
        <li><img src="http://placehold.it/1904x630"></li>
        <li><img src="http://placehold.it/1905x630"></li>
    </ul>
</div>

.slideshow{
background-color: firebrick;
height: 350px;
}

.slideshow ul{
position: relative;
}

.slideshow ul li{
opacity:0;
position: absolute;
}

https://jsfiddle.net/7j5zpx14/1/

我尝试过使用flexbox，但我没想到这个div和图像有什么问题。

Answer 1

你只在 img标签下面的css下方加密，然后看Fiddle Demo

的CSS：

.slideshow img {
  float: left;
  height: 350px;
  width: 100%;
}

请参阅Fiddle Demo Link

幻灯片 - div中的图像

1 个答案: