响应CSS背景图像 - 如何使内容跟随 [英] Responsive CSS background image - how to make content follow

问题描述

我有标题div中的CSS背景图片。

问题是，当我给标题图片赋予height值时，图片响应能力很好，但我不能得到它的工作， div然后div的高度是固定的。

查看工作示例 JSFIDDLE

有任何帮助如何解决？

解决方案

这是您的解决方案：

问题： -

解决方案： - ，而不是高度。使用padding-bottom或padding-top值来提高响应速度。成百分比值与填充匹配很好。

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

例如：如果背景图片尺寸为（1200宽）x（450高）像素。那么图片响应的高度值将是：37.5％

公式： - Y（×）100 is（450×100÷1200）= 37.5％

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

代码： -

  .custom-header-option {
 padding-bottom：37.5％; / *这将使高度响应* / 
 background-image：url（'http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg'）; 
 background-repeat：no-repeat; 
 background-size：cover; 
 background-position：center; 
} 
  

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

I have CSS background image in header div. Image responsiveness works fine but I cant get it work so that content under header image "follows" image when it resizes.

Problem is that when I give height value to header image div then div height is fixed. And when I do not give height image is not shown at all.

See working example JSFIDDLE

Any help how to fix?

解决方案

Here is your solution:

Issue:- Height value in percentage doesn't work, until unless it has been used in any position layer.

Solution:- Instead of height. Use "padding-bottom" OR "padding-top" value to make height responsive. Becasue percentage values work well with "padding".

The calculation is very simple to get the relevant responsive height value of any background image.

For Example:- If Background image dimensions are (1200 width) x (450 height) Pixels. Then image responsive "height" value would be: "37.5%"

Formula:- Y (×) 100 (÷) X. Which is (450×100÷1200) = 37.5%

Solution URL:- http://sandeepparashar.com/stackoverflow/responsive-css-background-image-height.html

Code:-

.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;
}

If need more help, most welcome :)

这篇关于响应CSS背景图像 - 如何使内容跟随的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！