仅背景尺寸宽度

Question

我已经在我正在制作的网页上制作了一个全屏幻灯片，但作为完成后的一个输入页面＆＃39;随着幻灯片放映..我希望将图片放在顶部，宽度在向用户解析后扩展到宽度的全尺寸。虽然高度将是静态的，如600px。

有办法做到这一点吗？用CSS还是什么？我是CSS的新手，谷歌搜索了很多天后，我还没有找到任何我想要做的正确的例子

我没有准备好我想要达到的目标，但希望有人会知道我想要做什么。

提前致谢

Answer 1

您可以在background-size中设置两个不同的值：

.yourimg {
      background-image: url('yourimghere.jpg');
      background-size: 100% 600px;
}

Answer 2

你可以试试像这样的容器

<强> HTML：

<div id="boom">
    plop
</div>

<强> CSS：

#boom {
    width: 100%;
    height: 600px;
    background: url(http://placehold.it/1600x600);
}

结果： http://jsfiddle.net/fx5jM/

Answer 3

这对我有用

.backgroundImage{
  background-size:contain;
  background-position:top center;
  background-repeat: no-repeat;
  height:600px;
}