html - 使标题图像适合容器,似乎没有任何效果

标签 html css html-helper

似乎没有什么对我有用。但我想做的是使标题图像适合我想要的大小,即容器。这是实际页面链接:this . 这里是 jsFiddle:http://jsfiddle.net/Zorabelle/f7DRh/ .

我认为这是我必须解决的问题,但我只是不知道。

/*HEADER IMAGE DETAILS - HEADER MUST BE 921PX WIDE*/
.header {
        background-image: url(http://media.tumblr.com/aceb30d864925524ee215c0d6f88e1bc/tumblr_inline_mu0br62w4R1s7znag.gif);
        background-repeat:no-repeat;
        height:200px; /*CHANGE TO THE HEIGHT OF YOUR BANNER*/
        }

我希望“定义术语”标题填满整个空间。帮忙?

最佳答案

这是一个有效的 JSFiddle 示例:http://jsfiddle.net/f7DRh/2/

您可以通过指定将图像大小设置为容器:

background-size:100% 100%;

这样它将始终保持在容器的宽度和高度内。

引用: http://www.w3schools.com/cssref/css3_pr_background-size.asp

关于html - 使标题图像适合容器,似乎没有任何效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19127225/

相关文章:

jquery - 使用 @HTML 助手 DropDownList 更新 .html

javascript - 在选择类上使用 jQuery 不是所有具有相同类的 div

asp.net-mvc-3 - 继承自 HtmlHelper 而不是扩展它

.net - ASP.NET MVC Html.ActionLink 结果 URL - 编码方式

html - Jekyll 在构建页面中插入的数字

javascript - CSS 变量未在 Mobile Safari 上更新

html - Margin-top 不适用于 div

html - 仅颜色元素的内容

javascript - SVG 自定义圆形

javascript - 从 HTML 编码的 UNIX 路径中剥离文件名