종횡비와 관련된 div 높이 유지

Question

저는 회사 웹 사이트의 모바일 친화적 인 사이트를 구축하기 위해 노력하고 있습니다. 그것이 설계된 방식은 망막의 약 2 배입니다. 내가 할 계획은 최대 너비 640px, 너비 100 %로 주 콘텐츠를 설정하는 것입니다. 멋지게 맞는 특정 배경 이미지가 있습니다. 그러나 div의 너비가 작아지면 조정할 높이가 필요합니다. 어떤 아이디어? 임의을 수용하도록 신장하는 고정 된 크기로 설정되지 않은 경우에 비 고정 된 폭 (예를 들어 100 %), 소자의 높이를 모든 컨테이너의 폭을 취하면서

*{margin:0;padding:0}h1,h2,h3,h4,h5,p,li,a,cite{font-size:14px;font-weight:normal}button,img{border:0}body{font-family:Arial, sans-serif;} 

body { 
    margin:0; 
    background-color:#fff; 
} 

.top, .body { 
    max-width:640px; 
    width:100%; 
    margin:0 auto; 
} 

.top { 
    background: white url(images/top.jpg) no-repeat; 
    background-size:auto; 
    overflow:hidden; 
    height:124px; 
    max-height:124px; 
} 

.top ul { 
    list-style:none; 
    height:100%; 
} 

.top ul li { 
    height:100%; 
    float:left; 
    display:block; 
} 

Answer 1

나는 이것에 대한 답을 찾았습니다. 그것은 비상식 마크 업을 약간 추가하지만 잘 작동합니다. 여기에서 찾을 수 있습니다 : http://jsfiddle.net/AdQ3P/

논리가 패딩 하단에 있습니다. 기본적으로 (img_height/img_width) * 100.이 필요합니다.

편집 다음은 코드이므로 jsfiddle에 종속되지 않습니다.

<div class="container"> 
    <div class="hero"></div> 
</div> 

.container { 
    width:100%; 
    max-width:500px; 
} 

.hero { 
    width:100%; 
    height:0; 
    background-size:100%; 
    background:url(http://img97.imageshack.us/img97/3410/photo2ue.jpg) no-repeat; 
    padding-bottom:75%; 
} 

또 하나의 지저분한 책상이었습니다.

Answer 2

: 여기

은 CSS의 -flow 콘텐츠 (여백, 여백, 테두리 ... 포함)

배경 이미지 대신 <img> 태그를 사용할 수 있으면 max-width:100%을 이미지 자체에 적용 할 수 있으며 컨테이너에 맞게 확장됩니다. 브라우저는 가로 세로 비율을 일관되게 유지하기 위해 높이의 크기를 조정합니다. 그러나 CSS 배경을 ima로 바꾸십시오. ge 태그가 항상 가능하지는 않거나 사용자가 직면 할 수있는 의미 및/또는 레이아웃 문제와 관련하여 최상의 옵션입니다.

Answer 3

작은 jQuery를 사용할 수도 있습니다. 이점은 그것이 의미 론적으로 유효한 픽스라는 것입니다. 따라서 코드를 편집하는 다음 사람은 무슨 일이 일어나고 있는지 쉽게 이해할 수 있습니다.

// Maintain aspect ratio of #my_div 

// Set aspect ratio of #my_div 
var aspect_ratio = 0.8; 

// Store the jQuery object for future reference 
var $my_div = jQuery("#my_div"); 

// Within your document ready function, 
// Do an initial resize of #my_div 
$(document).ready(function(){ 
    $my_div.height($my_div.width() * aspect_ratio); 
}); 

// Resize #my_div on browser resize 
jQuery(window).resize(function() { 
    $my_div.height($my_div.width() * aspect_ratio); 
}); 

Answer 4

새 상대 글꼴 크기 단위를 사용하여 높이 또는 img없이 잘 작동합니다. VM (http://www.sitepoint.com/new-css3-relative-font-size/).