div를 고정 너비와 가변 높이로 생성합니다.

Question

고정 너비와 가변 높이를 가진 div를 만들려고합니다. 배경에 사용하려는 그림은 here입니다. 문제는 이미지 높이보다 더 큰 div가있을 때 하단 모서리가 생략되고 동일한 크기의 div보다 작은 div가있는 경우 모든 크기의 둥근 모서리로이 작업을 수행하려면 어떻게해야합니까? 고마워요

Answer 1

그냥 테두리를 사용하여 이미지의 하단을 사용하십시오.

<div style="padding-bottom:20px; width:303px; background: url('http://i48.tinypic.com/wvvhbr.png') left bottom no-repeat;"> 
     <div id="myContent" style="border: 1px solid #ccc; border-bottom:none;"> 
      Some Content 
     </div> 
    </div> 

당신은 상단에 둥근 테두리를해야 할 경우, 단순히 상단 정렬과 다른 이미지로 #myContent에 스타일 "배경"을 추가합니다.

Answer 2

하단에 배경 이미지 배치 - 모서리가 맞도록 div의 일부 패딩 추가. bg 이미지를 실제로 키가 크도록하십시오.

Answer 3

항상 둥근 모서리가 당신을 보장 배경 위치를 사용 :

CSS :

background-position:bottom; 

당신은 여분의 높이를 많이 가지고 이미지를 만들어야합니다 사업부가하는 경우 있도록 결국 예상보다 키가 크고, 항상 놀 수있는 여유가 있습니다.

또 다른 옵션은 div를 2 개의 별도 div - 1로 나누는 것입니다. 다른 하나는 기본 콘텐츠 섹션으로, 다른 하나는 아래쪽으로 만곡 된 모서리를 추가하는 것입니다. 이렇게하면 주 div에 1px의 높은 배경 이미지를 사용하고 곡선 테두리 이미지에 20px (ish) 이미지를 사용하여 파일 크기를 상당히 줄일 수 있습니다. 내가 당신을 위해 예제를 첨부했습니다 : Download Example