div 크기에 따라 이미지 크기를 조정하는 방법은 무엇입니까?

Question

내 HTML5 코드 내 CSS를

이미지 버튼 사업부에서

#imgbutton 
    { 
    background-image:url('../images/tab1.png'); 
    height:35px; 
    width:269px; 
    border-radius:8px; 
    margin-left:6%; 
    } 
    #changeimg 
    { 
    width:80%; 
    height:50px; 
    margin-left:5%; 
    padding-top: 12px; 
    z-index: 1; 
    } 

난 배경 이미지를 사용하고있다

 <div id="changeimg" align="center"> 
      <div id="imgbutton" onclick="changeimg()"/> 
    </div> 

하고 난 화면 크기를 변경할 때 내가 변경 이미지 사업부에 따라 이미지를 조정하려면 어느 누구도이 일을 도울 수 있습니까 ?? 미리 감사드립니다 !!

Answer 1

어쩌면이 게시물은 당신을 위해 재미있다 : Set size on background image with CSS?

이 작업은 CSS3를 사용하여 달성 될 수있다. "배경 크기"를 지원하지 않는 브라우저는 배경을 스케일하지 않을 것입니다!

background-size: 100% auto; // 100% width and auto height, keeping aspect ratio 
background-size: auto 100%; // 100% height and auto width, keeping aspect ratio 
background-size: 100% 100%; // 100% width and height, aspect ratio will be lost 

Answer 2

여전히 이미지 용 div를 사용하는 이유는 아직도 알 수 없습니다. 이것

<div id="changeimg" align="center"> 
    <img id="imgbutton" src="../images/tab1.png" onclick="changeimg()" /> 
</div> 

이 CSS를

#imgbutton 
{ 
    height:100%; /*I'm not 100% sure, but leaving height out might maintain aspect ratio*/ 
    width:100%; 
    border-radius:8px; 
    margin-left:6%; 
} 
#changeimg 
{ 
    width:80%; 
    height:50px; 
    margin-left:5%; 
    padding-top: 12px; 
    z-index: 1; 
}