html5boilerplate의 반응 형 로고 (이미지 대체)

initializr.com을 통해 html5 상용구의 반응 형 버전을 사용하고 있습니다. 내 사이트가 사용자 정의 로고가 그래서 난이html5boilerplate의 반응 형 로고 (이미지 대체)

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

같은

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

을 H1하는 .IR 클래스를 추가 사용하는 documentation는

은 당신이 어떤 요소에 .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/

출처

2012-10-05 Barbara

당신의 jsfiddle은, 아무것도 .. – Nelson

@Nelson 음을 보여줍니다 나를 위해 작동 바이올린 예입니다. 나는 새로운 것을 만들 수 있었지만 근본적으로 나는 단지 게시물의 코드를 c/p로 만들 수 있었다. 다른 모든 사람들에게 나타나지는 않습니까? – Barbara

imgur 이미지를 하나의 탭에서 독점적으로 연 다음 jsfiddle이 상쾌하게 표시했습니다. "로고가 더 이상 반응하지 않습니다"라고 설명 할 수 있습니까? 어떻게하면 로고가 반응성이 좋기를 원합니 까? – Nelson

필자는 .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/

출처

2012-10-06 03:34:41 justinavery

html5boilerplate의 반응 형 로고 (이미지 대체)

답변

관련 문제