css - 响应式 CSS 背景图片 - 如何让内容跟随

Question

我在 header div 中有 CSS 背景图片。图像响应性工作正常，但我无法让它工作，以便标题图像下的内容在调整大小时“跟随”图像。

问题是，当我为标题图像 div 赋予高度值时，div 高度是固定的。当我不提供高度时，图像根本不会显示。

参见工作示例 JSFIDDLE

有什么解决办法吗？

Answer 1

这是您的解决方案:

问题:-除非已在任何位置层中使用，否则以百分比表示的高度值不起作用。

解决方案:- 而不是高度。使用“padding-bottom”或“padding-top”值使高度响应。因为百分比值与“填充”配合使用效果很好。

计算非常简单，可以得到任何背景图片的相关响应高度值。

例如:-如果背景图像尺寸为(1200 宽)x(450 高)像素。那么图像响应“高度”值将是:“37.5%”

公式:-Y(×)100(÷)X即(450×100÷1200)=37.5%

解决方案网址:- http://sandeepparashar.com/stackoverflow/responsive-css-background-image-height.html

代码:-

.custom-header-option {
    padding-bottom:37.5%; /* This will make height responsive */
    background-image: url('http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

如果需要更多帮助，非常欢迎:)