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

时间:2015-07-06 02:54:10

标签: css polymer flexbox

使用Polymer 1.0,我正在尝试进行布局,并使CSS background-image宽度为100%,高度为auto。不确定如何以flex-boxpolymer布局方式解决此问题。我可以使用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;
}

1 个答案:

答案 0 :(得分:0)

使用background-size: 100% auto;

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