2012-01-23 2 views
0

화면 높이에 따라 테이블이나 div 안에 이미지 크기를 조정하고 싶습니다.이미지와 표의 크기를 동시에 조정하려면 어떻게해야합니까?

나는 이미지의 크기를 바꾸기 위해 모든 종류의 코드를 사용하지만, 테이블이나 div 외부로 드래그하는 대신 항상 절대 위치 지정 스테핑을 얻습니다.

  1. 이미지의 비율을 준수해야합니다.
  2. 전체 이미지는 항상 모든 화면 해상도에서 볼 수 있어야합니다. (스크롤하지 않음).
  3. 테이블의 맨 위 셀은 항상 크기가 조정 된 이미지의 너비와 같지만 고정 높이 여야합니다.
  4. 내 이미지 ("1.jpg")는 원래 800x600입니다.

내 코드 :

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Test</title> 

<style> 

html, body, table { height:100%; width:auto; } 

.stretch { 
    height:100%; 
    width:auto; 
} 

</style> 

</head> 

<body> 

<table border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td height="125px" bgcolor="#CCCCCC">&nbsp;</td> 
    </tr> 
    <tr> 
    <td><img src="images/1.jpg" class="stretch" /></td> 
    </tr> 
</table> 

</body> 
+0

단지 HTML ? – Phphelp

답변

0

당신이 사용할 수있는 CSS3 :

background:url("1.jpg"); background-size:100%;

에 대한 자세한 설명은 여기에서 찾을 수 있습니다 : 당신이 사용하는

http://www.w3schools.com/cssref/css3_pr_background-size.asp

+0

테이블이 여전히 다른 크기로 "자동 확장"되지 않고 전체 이미지가 배경에 표시됩니다. 게다가, CS3이기 때문에 브라우저의 이전 버전에 문제가 있습니다. – amanique

+0

참. JavaScript 등을 사용하고 싶습니까? –

+0

네, 자바 스크립트를 사용하면 트릭을 할 수 있습니다. – amanique

관련 문제