2011-07-02 7 views
2

이 ...CSS 이미지 크기?

#logoWrapper{ 
    background-image: url(../image/bg_img.jpg); 
    height:86px; 
    width:100%; 
    } 

Q> 어떻게 자동으로 Wapper와 #logoWapper 같은 들어갈 이미지의 크기를 해결하기 위해?

#logoWrapper img{  // not work 
    height:86px; 
    width:100%; 
    } 

고마워요! CSS3에서 배경 이미지

+0

내가 더 CSS 배경 이미지가 영향을받지 않습니다 ..therefore 그 #logoWrapper의 IMG가 #logoWrapper 내부의 모든 태그에 영향을 추가 할 전체 클래스 CSS – kheya

+0

을 게시하시기 바랍니다. 이런 경우에는 img 태그를 사용하는 것이 최선의 방법입니다. – Joonas

답변

2

당신은 당신이 또는 당신이 상대 위치 DIV 내부의 절대 위치 지정된 이미지를 레이어 할 수 background-size: 100%;

여기 http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

를 문서화 사용할 수 있습니다 반복하지 스트레칭 및 추가 래퍼를 추가하려면 .

<style> 
#wrapper { 
position:relative; 
... 
} 
#wrapper div, #wrapper img { 
position:absolute; 
top:0px; 
left:0px; 
... 
} 
</style> 

<div id="wrapper"> 
<img ... > 
<div> this goes on top of image</div> 
</div> 
+0

#logoWrapper { background-image : url (../ image/bg_img.jpg); 높이 : 86px; 너비 : 100 %; background-size : 100 %; } 감사합니다. 너 이런 뜻이야? 하지만 작동하지 않습니다 .... – SoonYeoung

+0

그것은 현대적인 브라우저를위한 코딩 일 것입니다 ... 대안은 지난 십년 브라우저 (이름을 지칭하지 않음)입니다. – Wayne

+0

@SoonYeoung : w3schools에 따르면 : "배경 크기 속성은 IE9 +, Firefox 4 이상, Opera, Chrome 및 Safari 5 이상에서 지원됩니다." 모든 브라우저에서이 기능을 사용하려면 Wayne에서 제안한 것처럼 div 대신 img를 사용해야합니다. – Pianosaurus