14

私は、当社のメイン Web サイトのモバイル フレンドリー サイトの構築に取り組んでいます。設計方法は、Retina の約 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;
}
4

4 に答える 4

25

私はこれに対する答えを見つけました。少し非セマンティックなマークアップを追加しますが、うまく機能します。ここで見つけることができます: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つの厄介な机でした。

于 2012-06-13T14:48:04.387 に答える
5

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 );
});
于 2013-03-24T00:28:01.890 に答える
1

固定されていない幅(たとえば100%)はコンテナのすべての幅を取りますが、固定サイズに設定されていない場合の要素の高さは、流入するコンテンツ(パディング、マージン、境界線など)に対応するように伸びます。

<img>背景画像の代わりにタグを使用できる場合はmax-width:100%、画像自体に適用すると、コンテナに合わせて拡大縮小されます-アスペクト比を一定に保つためにブラウザが高さのサイズを変更します-ただし、css背景を置き換えます画像タグを使用することは、セマンティクスや直面する可能性のあるレイアウトの問題の観点から、常に可能または最良のオプションであるとは限りません。

于 2012-05-28T15:27:09.807 に答える
-1

高さの設定や img を使用せずに、たとえば vm ( http://www.sitepoint.com/new-css3-relative-font-size/ ) などの新しい相対フォント サイズ単位を使用すると、非常にうまく機能します。

于 2013-12-23T00:44:23.843 に答える