CSS : 이미지가 포함 된 메뉴의 너비와 높이의 크기 (%)

모바일 방문객에게 적합한 사이트가있어서 너비와 높이 모두 사용자 화면의 크기에 맞게 조정해야합니다. 또한 2 개의 탐색 메뉴 (왼쪽 1 개, 오른쪽 1 개) 및 바닥에 고정 정보 (예 : 바닥 글)가 있습니다. 이 모든 부분에는 이미지가 포함되어있어 메뉴의 크기에 맞게 크기를 조정해야합니다. 다음 CSS와CSS : 이미지가 포함 된 메뉴의 너비와 높이의 크기 (%)

<body> 
    <table class="wholepage"> 

    <tr class="top"> 

     <td class="left"> 
     <table> 
      <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr> 
      <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr> 
     </table> 
     </td> 

     <td class="middle">Middle content</td> 

     <td class="right"> 
     <table> 
      <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr> 
      <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td></tr> 
     </table> 
     </td> 

    </tr> 
    <tr class="bottom"> 

     <table> 
     <tr> 
      <td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td> 
      <td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td> 
     </tr> 
     </table> 

    </tr> 
    </table> 
</body>

: 구체적으로, 페이지 (기본적으로 너무 큰 임의의 이미지 추가) 같은 것입니다 그와 마찬가지로

.wholepage { 
    width: 100%; 
    height: 100%; 
} 

.wholepage img { 
    width: 100%; 
    height: 100%; 
} 

.top { 
    height: 80%; 
} 

.left, .right { 
    width: 15%; 
} 

.middle { 
    width: 70%; 
} 

.bottom { 
    height: 20%; 
}

이 페이지의 폭이 완벽하게 자신을 적응 , left-middle-right 사이의 15 % -70 % -15 % 분포를 유지합니다. 그러나 수직으로, 모든 이미지는 확장을 거부합니다. 페이지를 맨 위 바닥의 80 % -20 % 분포에 맞게 어떻게 얻을 수 있습니까?

편집 : 여기 http://www.w3schools.com/css/tryit.asp?filename=trycss_default

<html> 
<head> 
<style type="text/css"> 

html, body { 
    height: 100%; 
} 

.wholepage { 
    width: 100%; 
    height: 100%; 
} 

.wholepage img { 
    width: 100%; 
} 

.top { 
    height: 80%; 
} 

.left, .right { 
    width: 15%; 
} 

.left { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
} 

.right { 
    position: fixed; 
    top: 0px; 
    right: 0px; 
} 

.middle { 
    width: 70%; 
    margin-left: auto; 
    margin-right: auto; 
} 

.bottom { 
    height: 20%; 
    position: fixed; 
    bottom: 0px; 
} 


</style> 
</head> 

<body> 
    <div class="wholepage"> 

    <div class="top"> 

     <div class="left"> 
     <table> 
      <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr> 
      <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr> 
     </table> 
     </div> 

     <div class="middle">Middle content</div> 

     <div class="right"> 
     <table> 
      <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr> 
      <tr><td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg" /></td></tr> 
     </table> 
     </div> 

    </div> 
    <div class="bottom"> 

     <table> 
     <tr> 
      <td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td> 
      <td><img src="http://apod.nasa.gov/apod/image/0304/bluemarble2k_big.jpg"/></td> 
     </tr> 
     </table> 

    </div> 
    </div> 
</body>

덕분에이를 기입하는 경우를 볼 수있는 방법입니다!

출처

2011-08-26 tb189

내가 해킹 끝났다. 사람이 더 좋은 방법을 알고하지 않는 한, 여기에 내가 무슨 짓을했는지 : 사이트는 개인적으로 사용하고, 모바일 브라우저를 사용하여,이 수정 작업을 수행

function fixHorizontalDimension(){ 
    maxHeight = window.innerHeight * [% height desired] * 0.9; 
    imgs = document.getElementsByClassName([classname of wrongly sized objects]); 
    for(i=0; i<imgs.length; i++){ 
    imgs[i].style.height = maxHeight; 
    } 
}

입니다. 크기 조정 (예 : 세로에서 가로로 전환)이 작동하지 않습니다.

출처

2011-09-02 07:38:30 tb189

먼저; 스타일을 적용하기 위해 테이블을 사용하지 마십시오. divs를 사용하거나 <header> 및 <footer> 등과 같은 html5 태그를 사용하는 것이 좋습니다. 다만 최대 폭을 사용, 폭 & 높이를 사용하지 마십시오

html, body { height: 100%; }

출처

2011-08-26 23:21:19

포인트를 찍었지만 html/body 높이를 100 %로 설정해도 이미지가 수직으로 축척되지 않습니다. – tb189

이미지에 'height = "100 %"및/또는 css 속성'img {height : 100 %; }'. –

그건 내가 CSS에 게시 :'.wholepage img {width : 100 %; 높이 : 100 %; }' – tb189

는 같은뿐만 아니라 100 % 높이 HTML과 몸을 설정해야합니다, 백분율와 높이의 정확한 처리를 보장하기 위해

을

.wholepage img { 
    max-width: 100%; 
}

IE < 8 개 스케일 이미지 가난하고 scale에 SizingMethod 세트 AlphaImageLoader를 사용할 필요가 확장 좋은 품질을 얻을 수 있습니다. 아마도 가장 쉬운 방법은 Drew Diller's DD_BelatedPNG library입니다. AlphaImageLoader을 사용하면 성능에 영향이 있음을 유의하십시오. 또한 IE6은 max-width을 지원하지 않으므로 IE6을 지원해야하는 경우 조건부 설명에 width: 100%을 사용하십시오.

또한, 나는 (또한 우수한 그의 책에서 발췌 한 내용이다.) Ethan Marcotte's A List Apart Article on Responsive Design에 대해 충분히 말할 수

출처

2011-08-26 23:36:13 steveax

max-width does not do .. 나는 Firefox를 지금 사용하고 있으며 브라우저가 적어도 하나 이상 작동하면 IE로 이동합니다. 나는 내 질문에 너 자신을 위해 그것을 볼 수있는 몇 가지 유용한 방법을 추가했습니다. – tb189

테이블이 아닌'div's를 사용한 간체 버전 : http://jsfiddle.net/V4tL9/ – steveax

CSS : 이미지가 포함 된 메뉴의 너비와 높이의 크기 (%)

답변

관련 문제