html5 样板中的响应式徽标（图像替换）答案

【问题标题】：Responsive logo (image replacement) in html5boilerplatehtml5 样板中的响应式徽标（图像替换）
【发布时间】：2012-10-05 15:01:08
【问题描述】：

我正在通过 initializr.com 使用响应版本的 html5 样板。我的网站使用自定义徽标，因此我将 .ir 类添加到 h1

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

喜欢这个

<h1 class="title ir">h1.title</h1>

documentation 说

将 .ir 类添加到您正在应用图像替换的任何元素到。用图像替换元素的内容时，请确保还设置一个特定的背景图像： url(pathtoimage.png);, width, 和高度，以便您的替换图像出现。

所以我在代码中添加了这些行

.ir {
background-image: url(http://i.imgur.com/yYnyJ.jpg);
background-size: 100% auto;
width:450px;
height:450px
}

问题是具体的宽度和高度。我无法摆脱它们，但徽标不会以这种方式响应。想法？这是小提琴。 http://jsfiddle.net/qeW3e/

【问题讨论】：

你的 jsfiddle 什么也没显示..
@Nelson Uhm，为我工作。我可以制作一个新的，但基本上我只是 c/p 帖子中的代码。它不会显示给其他所有人？
在一个标签中独占打开imgur图像后，刷新后jsfiddle显示它..你能解释一下“标志不再响应”吗？您希望徽标如何响应？
@Nelson 它现在的编码方式图像替换工作，但它没有响应。如果我缩小我的视口，无论如何徽标总是 400px x 400px。我希望它相应地缩小。
好的，现在我明白了，谢谢你的解释。

标签： html responsive-design html5boilerplate image-replacement

【解决方案1】：

我认为这是指在您定位的元素上设置宽度和高度，而不是在 .ir css 类本身中。

实际的解决方案在网站上可能看起来更像这样。

HTML

<div class="header">
<div class="logo"><h1 class="title ir">h1.title</h1></div>
<div class="navigation"><p>navigation goes here</p></div>
</div>

CSS

    .ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    text-indent: -9999px;

    background-image: url(http://i.imgur.com/yYnyJ.jpg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}
.header {height:300px;}
.logo {width: 30%; float:left; height: 100%;}
.logo h1 {display:block;}
.navigation {float:left; width: 65%;}

这里是小提琴的例子

http://jsfiddle.net/qeW3e/1/

【讨论】：