반응 레이아웃을 사용하여 이미지 크기 조정

-1

내 로고 이미지의 크기가 브라우저 크기에 따라 조정되지 않는 이유를 알아낼 수 있습니까?반응 레이아웃을 사용하여 이미지 크기 조정

---------------- CSS ---------------------

body { 
     height: 100%; 
     background-color:#333; 
} 
#logo { 
     max-width: 100%; 
} 
img { 
    border: 0; 
    max-width: 100%; 
    height: auto; 

} 
#header-bg { 
    background-image: url("header-bg.png"); 
    overflow: auto; 
    width: 100%; 
}

- 그 이유는, 당신이 max-width을 준됩니다

<body> 
    <div id="header-bg"> 
    <div id="logo"> 
     <img src="logo.png" /> 
    </div> 
    </div> 
</body>

출처

2013-02-12 MG1

--------------- HTML ------------------- 원래 width보다 작을 수 있습니다. 따라서 width을 부여하면 문제가 해결됩니다.

img { 
    border: 0; 
    width: 100%; 
    height: auto; 
}

이 외에도 모든 것이 적합합니다. 당신이 당신의 이미지가 화면의 전체 너비를 차지하는, soooo는 큰 아니라고 판단되는 경우

는, 부모의 폭을 제공, 25%을 말한다. 그리고 이미지에 width은 100%입니다. 부모님이 화면의 너비에 따라 조정하므로 이미지도 마찬가지입니다. :)

출처

2013-02-12 16:39:27

너비를 100 %로 설정하면 전체 창에 로고가 확장됩니다. – MG1

@ MG1 업데이트 된 답변보기 희망이 도움이됩니다. :) –

@Praveen Kumar가 설명한 내용을 보여주기 위해 jsFiddle을 만들었습니다. http://jsfiddle.net/persianturtle/4h2xU/1/ –

반응 레이아웃을 사용하여 이미지 크기 조정

답변

관련 문제