확대 이미지 내부 DIV

Question

크기를 조정 한 후 div와 동일한 높이로 이미지를 확장하려면 어떻게해야합니까? 또는 이미지에서 남겨진 공백을 어떻게 채울 수 있습니까?

Answer 1

내가이 당신에게 원하는 결과를 얻을 것이라고 생각 컨테이너 사업부의 배경 색상 :

<style> 
    div { 
    width:50px; 
    height:100px; 
    } 

    div img { 
    height:100%; 
    } 
</style> 
<div> 
    <img src='path/to/img.gif' /> 
</div> 

이 이미지는 이제 컨테이너 DIV의 높이로 작성하여 가로 세로와 폭을 확장 할 수 비율. 이로 인해 이미지가 컨테이너 div의 의도 된 너비 경계를 넘어 확장 될 수 있으므로주의해야합니다.

div {background-image: url(path/to/image); background-size: 100%} 

배경-size 속성 만 사파리와 오페라의 최신 버전에서 지원됩니다

Answer 2

설정

Answer 3

CSS3에서이 작업을 수행 할 수있는 방법이있다. 속기에,

div { 
    background-image: url(path/to/image); 
    background-size: 100%; 
    background-color: #000000; 
    } 

을 또는 : 다른 브라우저의 경우과 같이, background-color 속성을 사용하여 색상과 이미지의 주위에 남아있는 공백을 채울 수

div {background:#000000 url(path/to/image) no-repeat; background-size:100%} 

를이 코드를 사용하는 것 CSS3 지원 브라우저 (최신 Opera, Safari 및 Firefox)에서 이미지가 늘어납니다. 오래된 브라우저와 IE는 지정된 배경색으로 채워진 이미지 주위의 공백을 갖게됩니다.