이미지의 높이는 텍스트에 따라 다릅니다.

제가하려는 것은 텍스트의 양에 따라 배경 이미지의 높이를 변경하는 것입니다.이미지의 높이는 텍스트에 따라 다릅니다.

ex. 이미지 높이는 100 픽셀이고 해당 div의 텍스트는 150 픽셀입니다. 입력 한 텍스트의 양에 따라 이미지 높이를 150 픽셀 (또는 그 이상)으로 늘리는 방법은 무엇입니까?

HTML :

<div class="scroll-bg"> 
    <img src="img/scroll_top.gif" style="position:absolute" /> 
     <div class="scroll-bg-img"> 
     <div class="scroll-content"> 
     <center><img src="img/recent_news.gif" /></center> 
     <div style="width:100%;margin-top:15px"> 
      <div style="margin-top:10px;color:black"> 
      <p>TEXT TEXT TEXT TEXT MORE TEXT</p> 
      </div> 
     </div> 
     </div> 
    </div>  
</div>

CSS :

.scroll-bg { 
    width: 810px; 
    float: right; 
} 

.scroll-content { 
    width: 765px; 
    margin-left: 15px; 
    word-wrap: break-word; 
} 

.scroll-bg-img { 
    background-image: url(img/scroll_bg.gif); 
    background-repeat: repeat-y; 
    z-index: 1; 
    width: 795px; 
    height: 1000px; 
    margin-top: 40px; 
    margin-left: 7px; 
    padding-top: 15px; 
}

출처

2013-04-26 ShadyPotato

background-repeat: no-repeat; 
background-size: 100% 100%;

컨테이너에 맞게 스트레칭 배경의 원인이되지만, 그만큼 당신이 그들을 제거하는 경우는 .scroll-bg-img

에 명시 height 및 width 세트가 같은 텍스트 크기되지 않으며, 텍스트의 높이에 맞게 크기를 정하면 배경 이미지가 늘어납니다.

출처

2013-04-26 21:17:09

당신은 당신의 .scroll-bg-img CSS에 background-size : cover를 사용할 수 있습니다. 그러나 모든 브라우저가이를 지원하지는 않습니다. 그냥 올려다보고 그게 전부인 것을 확인하십시오.

편집 :

.scroll-bg-image { 
    background-image : url("img/scroll_bg.gif"); 
    background-position : center center; 
    background-repeat : no-repeat; 
    background-size : cover; 
}

업데이트 배경과 같은 속성, 그리고 당신을 위해 수행하는 방법을 참조하십시오.

출처

2013-04-26 21:09:49

배경 이미지가 엉망이 된 것 같습니다. 해당 속성을 추가하면 오른쪽 절반이 잘립니다. – ShadyPotato

@ShadyPotato 업데이트되었습니다. 시도해보십시오. –

이미지의 높이는 텍스트에 따라 다릅니다.

답변

관련 문제