使用布局属性使“背景图像”响应？

Question

使用Polymer 1.0，我正在尝试进行布局，并使CSS background-image宽度为100％，高度为auto。不确定如何以flex-box或polymer布局方式解决此问题。我可以使用width: 100%;，但我仍然有一个问题，使高度响应...高度将只显示我height: 500px;。如何使背景图像显示并响应？它必须是background-image属性。

http://jsbin.com/dojupayiwi/1/edit?html,css,output

#video-photo-container {
   background-image: url(http://www.waynestiles.com/wp-content/uploads/2012/05/King-David-statue-on-Mount-.jpg);
    background-size: cover;
}

Answer 1

使用background-size: 100% auto;

这将使背景与容器的宽度相匹配，然后调整高度以使其保留图像的原始高宽比。据我所知，没有办法绕过设置容器的宽度/高度。