需要带有背景图像的空 Div 来强制高度并且必须是响应式的

需要带有背景图像的空

关注

发信

关注(28)粉丝(399)

需要带有背景图像的空 Div 来强制高度并且必须是响应式的

本文介绍了需要带有背景图像的空 Div 来强制高度并且必须是响应式的的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要以下内容:

没有内容的空 div
背景图片设置为div
背景图像在重新调整大小时变得流畅/响应我无法设置为固定
div 上的尺寸

我尝试的所有操作都无法强制打开 div 以支持背景图像的大小.非常感谢任何帮助...

http://www.everymountain.us/

<div class="wrapper"><div class="inner"><div class="top_banner"></div>

<div class="clear"></div>

</标题>.front #header .top_banner { 背景: url('images/bg_front.jpg') 不重复；背景尺寸:封面；}

解决方案

将高度的纵横比锁定到其流体宽度的方法是使用 padding-top 或 padding-bottom 百分比.这是因为所有填充百分比都是元素容器的宽度.您的背景图片为 960 x 520，因此高度为 54.166666666667%.

html

css

.top_banner {背景图片:url('图片/bg_front.jpg');背景尺寸:100%；宽度:100%；填充顶部:54.166666666667%；高度:0；}

示例:http://jsfiddle.net/SsTZe/156/

本质上是同一个问题:CSS 流体图像替换?

I need the following:

emtpy div with no content
background image set to the div the
background image to be fluid/responsive on re-size I cannot set fixed
dimensions on the div

Everything I try fails to force the div open to support the size of the background image. Any help is greatly appreciated...

http://www.everymountain.us/

<header id="header">
<div class="wrapper">
<div class="inner">
<div class="top_banner"></div>
</div>
<div class="clear"></div>
</div>
</header>

.front #header .top_banner { background: url('images/bg_front.jpg') no-repeat;   background-size: cover; }

解决方案

The way to lock a height's aspect ratio to it's fluid width is to use padding-top or padding-bottom percentage. This is because all padding percentages are of the the element container's width. Your background image is 960 x 520, so the height is 54.166666666667%.

html

<div class="top_banner"></div>

css

.top_banner {
    background-image: url('images/bg_front.jpg');
    background-size: 100%;
    width: 100%;
    padding-top: 54.166666666667%;
    height: 0;
}

Example: http://jsfiddle.net/SsTZe/156/

Essentially the same question: CSS fluid image replacement?

                        这篇关于需要带有背景图像的空 Div 来强制高度并且必须是响应式的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

07-24 18:21