アスペクト比に関連するdivの高さを維持する

Question

私は、当社の主要なウェブサイトのモバイルフレンドリーなサイトを構築しています。それが設計されている方法は、網膜の約2倍です。私がしようとしているのは、最大幅640px、幅100％のメインコンテンツを設定することです。私はうまく収まる特定の背景イメージを持っています。しかし、divの幅が小さくなるにつれ、高さも調整する必要があります。何か案は？ここ

は、CSSは次のとおり

*{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%; 
} 

また、私は笑った1つの乱雑なデスクでした。

Answer 2

非固定幅つつ（例えば、100％）すべてのコンテナの幅を取り、固定サイズに設定されていない要素の高さで任意に適応するためにストレッチします

背景画像の代わりに<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/）。