# site-title을 RESIZABLE 이미지로 바꾸는 방법은 무엇입니까?

#site-title 텍스트 with a fixed-size image을 바꿀 수 있습니다. 문제가 없습니다.# site-title을 RESIZABLE 이미지로 바꾸는 방법은 무엇입니까?

이제 Twenty11의 WordPresse 헤더처럼 브라우저의 크기에 따라 자동으로 크기를 조정하고 싶습니다.

불을 지르고 그 책임이있는 CSS는 것을 저에게 말한다 :

#site-title { 
    text-indent: -9999px; 
    width: 100%; /* 980px; width of the image file. */ 
    height: auto; /* 128px; height of the image file. */ 

    margin: 0px 0 0 0; 
    padding: 0em 0 0; 
    background: url(images/header.png) white no-repeat; 
    font-size: 1px; 
    line-height: 1px; 
    text-decoration: none; 
}

이 정말 작동하지 않습니다 :이 사이트

#branding img { 
    height: auto; 
    margin-bottom: -7px; 
    width: 100%; 
}

하지만 사이트 제목이 복사 할 때 - 타이틀 이미지는 동일한 원본 크기를 유지합니다.

새로운 WordPress의 "크기 조정 마법"기능을 만들기 위해 내가해야 할 일이 있습니까?

출처

2012-02-12 ef2011

이것은 CSS 질문이며 WordPress의 질문이 아닙니다. –

@ m0r7if3r 확실한가요? 내 게시물에서 볼 수 있듯이 [CSS 방법] (http://allaboutbasic.com/2011/06/15/wordpress-com-theme-twenty-eleven-css-style-sheet-modification-change -site-titledescriptionpost-titlecommentsmenussidebar-and-more /)가 있지만, 매우 트릭이 필요하며 이는 WordPress에만 해당됩니다. 아마도'functions.php'에있는 뭔가? – ef2011

그것은 단지 [CSS3 미디어 쿼리] (http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries)입니다. wordpress는 아무 것도 없습니다. twentyeleven을 위해 style.css의 끝 부분을 보면 알 수 있습니다. –

이미지의 크기를 조정하려면 부모 요소 크기를 조정할 수 있어야합니다. 스물 일곱 개의 테마를 취하는 경우 #page 요소는 최대 너비를 갖지만 width을 갖지 않습니다. 그러면 이미지의 width:100%은 브라우저 너비에 따라 크기가 조정됩니다.

출처

2012-02-14 09:58:28 viky

감사합니다 (+1), 어떻게 이것을 사이트 제목의 이미지에 적용합니까? 그것의 이미지는'background : url' 속성에 있고 헤더와 같은'img' 속성에는 없습니다. – ef2011

CSS에서'background-size : cover'를 사용하십시오. 배경 이미지 크기를 요소의 크기로 만듭니다. 그러나 구형 (<9) IE의 경우 독점 필터를 사용해야합니다. http://css-tricks.com/perfect-full-page-background-image/ – viky

+1 감사합니다. 그게 좋은 팁이지만, 나는 그것을 시도했을 때 나는 기대했던 결과를 얻지 못했다 : 나는 이것을'background-attachment : scroll'과 함께 사용하면 전혀 확장되지 않으며'background- attachment : fixed it it [scales] (http : //whereswalden.com/files/mozilla/background-size/page-cover.html), 브라우저 페이지 크기 전체의 크기에 맞게 확장됩니다. site-title' 엘리먼트이다. – ef2011

# site-title을 RESIZABLE 이미지로 바꾸는 방법은 무엇입니까?

답변

관련 문제