2

私は次のHTMLを持っています:

<body>
  <div id="page">
    <ul id="images">
      <li class="image">
        <img src="portrait.jpg"/>
      </li>
    </ul>
    <div id="trailing-content">
      <p>line 1</p>
      <p>line 2</p>
      <p>line 3</p>
      <p>line 4</p>
      <p>line 5</p>
      <p>line 6</p>
      <p>line 7</p>
      <p>line 8</p>
    </div>
  </div>
</body>

次の CSS を使用します。

body, html{

  width:100%;
  height:100%;

}

body, div, ul, li{

  border:0;
  margin:0;
  padding:0

}

ul, li{

  list-style:none;

}

#page{

  width:75%;
  height:100%;

  margin:0 auto;

}

#images{

  position:relative;

  width:100%;
  height:70%;

  overflow:hidden;

}

#images .image{

  width:100%;
  height:100%;

  text-align: center;

}

#images .image img{

  max-width:100%;
  max-height:100%;

  margin:0 auto;

}

ここで意図した結果は、可視画像が特定の時間に画面の高さの最大 70% になることです。このcodepenでわかるように、これはメイン ブラウザーのデスクトップ バージョン (テスト済みの Firefox、Chrome、Safari) で完全に機能します。

しかし、モバイル ブラウザー (具体的には、iOS6 を実行している iPhone 4 の Safari および Chrome Mobile) では、画像が大きく ( overflow:hiddenCSS のルールによってカットされ) たままになり、サイズが適切に制限されません。

iPhone のスクリーンショット:

ここに画像の説明を入力

そして、これが本来の動作をするデスクトップ バージョンです。

デスクトップ

#images奇妙なことに、これは、タグ (この場合は ) に続く後続のコンテンツである場合にのみ発生し#trailing-contentます。これは、画像がその親の寸法を無視し、実際の iPhone 画面サイズのみを尊重していることを示しています。

アップデート

何が原因なのかはまだわかりませんが、iOS7 が実際に正常に動作していることに気付きました。しかし、ここで iOS6 のサポートを打ち明けるつもりはないので、この質問を報奨金にかけることにしました。

4

3 に答える 3

-1

私は次のことを試します：

max-width: 70%;
height: auto;
width: auto;

そうすれば、画像はトリミングせずに適切にサイズ変更されます。ただし、適切に機能させるには、単にコピーしてサイズを変更する必要がある大きな画像でトリミングの問題が発生しました。

于 2013-11-18T07:05:42.063 に答える
-2

高さを扱うときは、画面サイズに対するパーセンテージは避けてください。高さと幅の両方にパーセンテージ ベースの制約を入れ子要素と隠されたオーバーフローで設定することは、トラブルを求めるようなものです。画面全体の高さが正確に収まるように画像がトリミングされていることがわかりますか?

もちろん、試行錯誤を続けることもできますが、私の意見では、それは時間の無駄です (そして神経も)。

代わりに、max-width: 100%たとえばmax-height: 500px大画面でのサイズ超過を避けるように設定し、コンテンツを自由に下にスクロールできるようにします。

ページを完全にレスポンシブにする場合は、CSS メディア クエリを使用します。

于 2013-11-17T23:10:25.913 に答える