Question

我在标题div中有CSS背景图片。图像响应性工作正常，但我无法使其工作，以便标题图像＆＃34;下面的内容＆＃34;调整大小时的图像。

问题是当我给标题图像div赋予高度值时，div高度是固定的。当我不给高度时，图像根本没有显示。

参见工作示例JSFIDDLE

任何帮助如何解决？

Answer 1

以下是您的解决方案：

问题： - 百分比中的高度值不起作用，除非它已在任何位置图层中使用过。

解决方案： - 而不是身高。使用“padding-bottom”或“padding-top”值来使高度响应。 Becasue百分比值适用于“填充”。

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

例如： - 如果背景图片尺寸为（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;
}

如果需要更多帮助，最欢迎：）

Answer 2

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

试试此代码：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背景图片 - 如何制作内容

2 个答案: