响应式CSS背景图片 - 如何制作内容

问题描述：

我在头div中有CSS背景图片。图像响应能够正常工作，但我无法得到它的工作，所以当它调整大小时，标题图像下的内容“跟随”图像。响应式CSS背景图片 - 如何制作内容

问题是，当我给标题图像div的高度值，然后div高度是固定的。而当我不给身高的形象根本没有显示。

参见工作示例JSFIDDLE

任何帮助如何解决？

尝试使用标头内部的div div而不是css background-image – reuelab 2014-09-03 06:30:44

不清楚当图像大小调整时标题图像“跟随”的含义。 – kinakuta 2014-09-03 06:34:31

这意味着标题图像下的内容应该附加在标题图像的底部 - 不会在标题图像和内容之间留下空白。 – ace 2014-09-03 06:37:39

答

这里是您的解决方案：

问题： -以百分比表示的高度值不起作用，除非它已用于任何位置图层。

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

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

例如： -如果背景图像尺寸是（1200宽度）x（450高度）像素。然后图像响应 “高度” 值将是： “37.5％”

公式： - Y（×）100（÷）十，它是（450×100÷1200）= 37.5％

解决方案网址： -http://sandeepparashar.com/*/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; 
}

如果需要更多的帮助，最欢迎:)

答

我想你想要做的是消除“白色空间”的差距？

试试这个代码：http://jsfiddle.net/0bjgfo16/4/

HTML

<img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg" /> 

    <div class="content-wrap"> 
     <p>here is content</p> 
    </div>

CSS

* { box-sizing: border-box; padding: 0; margin: 0; } 
    img { max-width: 100%; float: left; } 

    .content-wrap { 
     width: 100%; 
     height: 200px; 
     background-color: grey; 
     color: #fff; 
     float: left; 
    }

响应式CSS背景图片 - 如何制作内容

相关推荐