Адаптивный логотип (замена изображения) в html5boilerplate

Я использую адаптивную версию шаблона html5 через initializr.com. На моем сайте используется собственный логотип, поэтому я добавил класс .ir в h1.

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

как это

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

В документации говорится

Добавьте класс .ir к любому элементу, к которому вы применяете замену изображения. При замене содержимого элемента изображением не забудьте также установить определенное фоновое изображение: url(pathtoimage.png);, ширину и высоту, чтобы отображалось замещающее изображение.

Поэтому я добавил в код эти строки

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

Проблема в конкретной ширине и высоте. Я не могу избавиться от них, но логотип не реагирует таким образом. Идеи? Вот скрипка. http://jsfiddle.net/qeW3e/


html responsive-design html5boilerplate image-replacement
person Barbara    schedule 05.10.2012    source источник
comment
ваш jsfiddle ничего не показывает..   -  person Nelson    schedule 05.10.2012
comment
@ Нельсон Эм, у меня работает. Я мог бы сделать новый, но в основном я просто копирую код из поста. Он не отображается для всех остальных?   -  person Barbara    schedule 05.10.2012
comment
После открытия изображения imgur исключительно на одной вкладке, jsfiddle показал его после обновления. Можете ли вы объяснить, что логотип больше не отвечает? как вы хотите, чтобы логотип был отзывчивым?   -  person Nelson    schedule 05.10.2012
comment
@Nelson В том виде, в котором он закодирован прямо сейчас, замена изображения работает, но не отвечает. Если я уменьшу область просмотра, размер логотипа всегда будет 400 x 400 пикселей, несмотря ни на что. Я хочу, чтобы он уменьшился соответственно.   -  person Barbara    schedule 05.10.2012
comment
хорошо, теперь я понял, спасибо за объяснение.   -  person Nelson    schedule 05.10.2012
comment
Каким будет желаемое поведение? Насколько большим должен быть логотип по отношению к области просмотра? Как быстро должен сжиматься/расширяться логотип при сжатии/расширении области просмотра? Каковы минимальные/максимальные размеры логотипа? Каковы пропорции (width/height) логотипа?   -  person Ana    schedule 05.10.2012

Ответы (1)


arrow_upward
2
arrow_downward

Я думаю, это относится к установке ширины и высоты элемента, на который вы ориентируетесь, а не в самом классе .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/

person justinavery    schedule 06.10.2012