텍스트가 내 웹 페이지의 상자 안에 들어갑니다.

Question

내 웹 페이지의 배경으로 하나의 큰 이미지가 있습니다. 이미지는 이미지 내부에 상자를 포함합니다. 어떻게 그 상자에 맞게 텍스트를 배치하고 그에 따라 축소하거나 크기를 조정합니까 (배경이 크기가 조정될 때 다른 해상도에서)?

Answer 1

처음에는 배경 이미지의 크기를 조정할 수 없습니다. 또한 텍스트 크기를 조정하려면 자바 스크립트 또는 페이지 새로 고침이 필요합니다.

http://www.jsfiddle.net에서 예제를 작성하면 사람들이 설명하는 내용을 더 잘 볼 수 있습니다.

UPDATE

귀하의 질문은 여전히 ​​불분명하고 난 강력하게 jsfiddle을 추천합니다. 하지만 올바르게 해석했다면 ... FancyBox를 사용하고 있습니다. FancyBox는 페이지를 실행하는 Javascript가 있음을 나타냅니다. Javascript를 사용하면 텍스트가 컨테이너에서 넘칠지를 확인하고 그에 맞게 크기를 조정할 수 있습니다.

이렇게하려면 <div> (또는 컨테이너 요소)을 가져 와서 .scrollHeight 및 .clientHeight 속성을 확인하십시오. 스크롤이 클라이언트보다 작은 경우 텍스트의 크기를 조정할 필요가 없습니다. 스크롤이 클라이언트보다 큰 경우 .style.fontSize 속성으로 크기를 조정할 수 있습니다.

이 어떤지 내가 설명하고있어의 검증되지 않은 예 : 당신은 당신이 좋아하는 방법을 작동하도록하려면이 조금 마술을해야 할 것이다

myDiv = $('containerElement'); // Get container object using its ID 
size = 50; // Start with 50px font size 

while(myDiv.scrollHeight > myDiv.clientHeight) { 
    // Decrement font size until scroll is less than client 
    myDiv.style.fontSize = (size - 1) + 'px'; 
} 

. 유의할 것들 :

내가 객체를 얻기 위해 달러 기능을 사용

• , 당신은 더 많은 정보를 위해 구글 수
컨테이너는 찾을 .clientHeight에 대한 차원을 정의해야합니다
• 대신 .offsetHeight을 시도해야 할 수도 있습니다
  : 당신은 그냥 오버 플로우를 제어하기 위해 찾고 있다면

  .clientHeight, 당신은 CSS를 사용할 수 있습니다

• overflow-x:hidden 또는 스크롤이나 자동차, overflow-y은 당신이 요구하는지 (코드) 분명하지 않다 때문에 내 대답은 모호, 같은
• white-space:nowrap가 자동 텍스트가 다시 한 번,

을 포장하지만 방지 할 수있다.

Answer 2

텍스트가 들어있는 "상자"의 크기를 조정하려는 경우 CSS를 사용하여 요소의 크기를 백분율 기준 너비 및 높이 값으로 설정할 수 있어야합니다.

요소 내부의 텍스트의 크기를 조정하려면 JavaScript (아마도 jQuery)를 사용하여 설정된 간격으로 창의 크기를 폴링하고 새 창 크기를 기반으로 텍스트 크기를 조정하는 것이 좋습니다.

편집 : 분명히하기 위해 텍스트 상자 (아마도 div)의 크기를 페이지의 비율로 설정할 수 있어야합니다.예를 들어 텍스트가 포함 된 div는 창 너비의 80 %와 높이의 80 %가 될 수 있습니다. 그런 다음 여백을 "자동"으로 설정할 수 있습니다. 이렇게하면 상자 주위에 여백이 생기고 치수는 창 너비에 비례합니다.

예 :

<style type="text/css"> 
    div#box { 
    height: 80%; 
    width: 80%; 
    margin: auto; 
    } 
</style> 
<div id="box">Text goes here.</div> 

이는 "상자"DIV이 페이지에 수평으로 중앙에 원인이되지만, 수직 중심이 조금 까다 롭습니다. 백그라운드에서 상자 안에 머무르기 위해 수직으로 센터링하는 방법을 알아 보려면 this page을보고 싶을 것입니다.

다른 사람이 제안한 것처럼 상자의 배경을 전체 페이지 배경이 아닌 텍스트 컨테이너의 배경으로 만 만들 수도 있습니다. 이것은 좀 더 쉬울 수도 있지만 여전히 센터 중심에 너비와 높이 속성 및 자동 여백을 사용해야합니다.

Answer 3

귀하의 솔루션에 대한 문제점은 다른 브라우저에 친숙하지 않고 매우 확장 성이 좋지 않아서 웹 사이트가 확장됨에 따라 더 많은 문제를 유발할 수 있다는 것입니다.

다른 BG 이미지에서 상자를 분리 시도하고 당신의 텍스트를 가지고있는 DIV의 배경으로 상자 이미지를 사용합니다.