如何拉伸背景图片来填充div

我想为不同的div设置背景图片,但是我的问题是:

  1. 图像的大小是固定的(60px)。
  2. 改变div的大小

如何扩展背景图像来填充div的整个背景?

#div2{ background-image:url(http://s7.static.hootsuite.com/3-0-48http://img.dovov.comthemes/classic/streams/message-gradient.png); height:180px; width:200px; border: 1px solid red; } 

在这里检查代码。

9 Solutions collect form web for “如何拉伸背景图片来填充div”

 background-size:100%; 

到你的CSS背景图像下面。

您也可以指定确切的尺寸,即:

 background-size: 30px 40px; 

这里: JSFiddle

您可以使用:

 background-size: cover; 

或者只是使用一个大的背景图像:

 background: url('..http://img.dovov.comteaser.jpg') no-repeat center #eee; 

现代CSS3(推荐未来和概率最好的解决scheme)

 .selector{ background-size: cover; /* streches background WITHOUT deformation so it would fill the background space, it may crop the image if the image's dimensions are in different ratio, than the element dimensions. */ } 

最大。 无需裁剪,也不会变形(可能无法填充 background-size: contain; background-size: contain; contains background-size: contain;
强制绝对拉伸(可能会导致变形,但不会裁剪) background-size: 100% 100%;

“老”CSS“总是工作”的方式

绝对定位图像作为(相对定位)父级的第一个子级,并将其扩展到父级大小。

HTML

 <div class="selector"> <img src="path.extension" alt="alt text"> <!-- some other content --> </div> 

相当于CSS3 background-size: cover;

要实现这个dynamic,你将不得不使用包含方法替代 (见下文)的相反,如果你需要中心裁剪图像,你需要一个JavaScriptdynamic地做到这一点 – 例如使用jQuery:

 $('.selector img').each(function(){ $(this).css({ "left": "50%", "margin-left": "-"+( $(this).width()/2 )+"px", "top": "50%", "margin-top": "-"+( $(this).height()/2 )+"px" }); }); 

实际例子:
像例子一样的CSS作物

background-size: contain;相当于CSS3 background-size: contain;

这可能有点棘手 – 将溢出父母的背景的维度将CSS设置为100%另一个自动。 实际例子: CSS拉伸背景作为图像

 .selector img{ position: absolute; top:0; left: 0; width: 100%; height: auto; /* -- OR -- */ /* width: auto; height: 100%; */ } 

相当于CSS3 background-size: 100% 100%;

 .selector img{ position: absolute; top:0; left: 0; width: 100%; height: 100%; } 

PS:要完全dynamic地以“旧”的方式完成封面/包含的等价物(所以你不必关心溢出/比率),你将不得不使用JavaScript来检测你的比例,并设置尺寸为描述。 ..

为此,您可以使用CSS3 background-size属性。 这样写:

 #div2{ background-image:url(http://s7.static.hootsuite.com/3-0-48http://img.dovov.comthemes/classic/streams/message-gradient.png); -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; height:180px; width:200px; border: 1px solid red; } 

检查这个: http : //jsfiddle.net/qdzaw/1/

你可以加:

 #div2{ background-image:url(http://s7.static.hootsuite.com/3-0-48http://img.dovov.comthemes/classic/streams/message-gradient.png); background-size: 100% 100%; height:180px; width:200px; border: 1px solid red; } 

你可以在这里阅读更多关于它: css3 background-size

通过使用属性的CSS:

 background-size: cover; 
 body{ margin:0; background:url('image.png') no-repeat 50% 50% fixed; background-size: cover; } 

要保持纵横比,请使用background-size: 100% auto;

 div { background-image: url('image.jpg'); background-size: 100% auto; width: 150px; height: 300px; } 

尝试这样的事情:

 div { background-image: url(../img/picture1.jpg); height: 30em; background-repeat: no-repeat; width: 100%; background-position: center; } 
  • Firefox Web控制台已禁用?
  • HTML - 如何在省略号激活时显示工具提示
  • 您是否将架构微数据元标记放在html正文中?
  • HTML:更改文本string中特定单词的颜色
  • 在jQuery中添加表格行
  • 如何减less<li>中项目符号和文本之间的默认差距?
  • 为什么把JavaScript放在首位
  • 为什么Firefox和Opera忽略显示内的最大宽度:table-cell?
  • 上次保证金/填充折叠在flexbox中
  • Twitter Bootstrap:Popover vs Tooltip?
  • 有没有CSSselect器<a>元素缺乏href属性?