CSS로 이미지 너비와 높이를 100 %로 설정하는 방법은 무엇입니까?

Question

내 코드 :

background:url(images/menu_edu.jpg) no-repeat; 

그러나 이미지의 절반 만이 표시지고 있습니다.

Answer 1

배경이있는 요소는 이미지의 크기 여야합니다.

즉이 Flower.jpg = 255px X 픽셀,

<div class="flower"> 
    Some text 
</div> 

.flower { 
    background: url(flower.jpg) no-repeat; 
    width: 255px; 
    height: 55px; 
} 

는 배경을 사용하는 경우 소자의 크기는 이미지의 크기로 설정 될 수 없다. 당신은 치수를 계산하기 위해 자바 스크립트를 사용할 수 있습니다.

또는 이미지를 반복해야하는 경우 배경 태그에 repeat, repeat-x 또는 repeat-y를 대신 사용할 수 있습니다.

Answer 2

코드가 충분하지 않지만 배경 이미지가 body 요소 인 경우 전체 뷰포트에서 늘려지지 않을 수 있습니다.

그냥 이미지를 표시하려면

html, body { min-height: 100% } 

Answer 3

시도의 IMG 태그는 ... 훨씬 더 유용하고 효과적이다 (그리고 (/ &) 높이 = 100 % 폭으로 설정 될 수있다). 당신은 전체 크기의 이미지를 표시하려면 <img src="this.jpg" />이 전체 크기로 표시됩니다 같은

Answer 4

이 필요가 <img> 태그에 높이와 너비 속성을 줄이

망가을 위해 CSS를 사용하지 않으려면

그러나 <div>에 전체 크기로 배경을 표시하려면 정확한 이미지 크기를 할당하는 것 외에는 다른 옵션이 없습니다.