2014-12-31 4 views
0

텍스트 요소 인 부모 요소의 높이와 너비를 100 % 유지하도록 배경 이미지의 크기를 조정하려고합니다. 텍스트 영역과 마찬가지로 동적으로 이미지를 조정하고 비율을 변경하고 싶습니다. 나는 다음과 같은 CSS를 가지고, HTML은 단지 textarea 태그입니다.CSS로 원하는 크기로 이미지 크기를 조정 하시겠습니까?

textarea { 
margin-left: 50px; 
margin-top: 50px; 
width: 500px; 
height: 100px; 
background: url(http://gfx9.com/images/contents/b/e/beautiful-cartoon-landscapes-vector-set-14-free0.jpg) no-repeat; 
background-size:100%; 
border-radius: 5px 

} 이미지가 수평으로 크기가 조정이 코드

,하지만 난이 지역의 모든 공백을 채우고, 수평 및 수직 크기를 조정합니다.

누군가가 해결책을 찾아 낼 수 있기를 바랍니다.

+2

background-size : 표지; 또는 background-size : 100 % 100 %; – devqon

+0

표지로는 작동하지 않지만 이미지는 영역 밖으로 흘러 나오지만 100 % 100 %로 표시됩니다. 백그라운드 크기에 대해 두 개의 값을 지정할 수 있는지 몰랐습니다. 빠른 솔루션에 감사드립니다. – SoKeT

+0

@devqon SoKeT가 정답으로 선택할 수 있도록 제안 사항을 답변으로 추가하십시오. – madforstrength

답변

2

두 개의 값을 지정해야합니다. 지금은 첫 번째 (너비) 만 잡기 때문입니다. 이와 같이 :

div { 
    background-size: 100% 100%; 
} 

구체적으로 설명 할 필요가있는 경우 px을 사용할 수도 있습니다. 또한 cover이라는 또 다른 값이 있으며 배경 이미지의 크기를 가능한 크게 조정합니다.

+0

StackOverflow에 오신 것을 환영합니다! 여러 줄 코드가있을 때 인라인 코드 대신 구문 강조 표시가있는 코드 블록으로 표시 할 수 있습니다. 자세한 내용은 [도움말 센터] (http://stackoverflow.com/editing-help#syntax-highlighting)를 참조하십시오. – Oriol

관련 문제