html - flexslider 图像尺寸封面

Question

对于我的个人网站http://stevengeorgeharris.com，我创建了一个单页设计，其中多个 div 相互堆叠。div 是 width: 100% 和 height: 100% 因此它们随浏览器缩放，在每个 div 中我使用 flexslider 创建全屏幻灯片。

我的问题是当浏览器变窄 flexslider 容器中的图像缩小时，会在下面留下空白。

这是 flexslider 图像的 CSS。

.flexslider .slides img {width: 100%; height:auto; display: block;}

score 2 · Accepted Answer

为此，您应该使用媒体查询。您可以在此处阅读有关媒体查询的更多信息：https ://developer.mozilla.org/en-US/docs/CSS/Media_queries

我做了你想做的事；用另一张图片，你可以在这里看到最终结果：http: //jsbin.com/olakit/2

这是代码（原始图片为 1024 x 683 px ）：

img {
  width: 100%;
  height : 100%;
}

@media (min-width: 2000px) {
  img{
    height: auto;
  }
}

请注意，“最小宽度”应该大于图片的宽度。

1 回答 1