0

ポートフォリオのWebサイトをiPadとiPhoneで表示できないという問題があります（iPhone-画面サイズに基づいて読み込まれる別のスタイルシートがありますが、それでも理想的ではありません）

私は次のようなすべての画像のクラスを持っています：

<img src="6.jpg" class="resize" />

これは、ウィンドウの高さにサイズ変更されることを意味します。これは、視聴者の画面上で可能な最大の画像を意味します。

.resize {height: 100%; width:auto;}

これは問題なく動作しますが、iPadやiPhoneでは、画像が1000％程度の途方もなく大きなバージョンで表示されているように見えます。このコードがモバイルデバイスで正しく表示されないのはなぜですか？

ありがとう

これが私のコードです：

<div id="maincontainer" >

<p><i>A Working Title</i></p>



<div id="img_container">
<img src="6.jpg" class="resize" /></div>
<div id="img_text">Caption text</div>

</div>

およびcss：

@charset "utf-8";
/* CSS Document */

#maincontainer {
height: 100%;
max-height:100%;
width:100%; max-width:100%;
}

#img_container {
height: 100%;
max-height:100%;
width:100%; max-width:100%;
}

.resize {
height: 100%; width:auto;
}
4

3 に答える 3

1

画像にクラスを与えるのではなく、＃img_containerの画像をターゲットにします。何かのようなもの....

    #img_container img{
    max-width: 100%;
    height: auto;
}

これはうまくいくようです

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<style> 
@charset "utf-8";
/* CSS Document */

.container{
    width: 100%;
}

#img_container{
    width: 100%;
    height: auto;
}


#img_container img {
height: auto;
max-height:100%;

}

   </style>



</head>

<body>


                 <div class="container">

                    <div id="img_container">
                    <img src="6.jpg"/>
                    </div>

                 </div>


</body>
</html>
于 2012-12-05T17:16:43.927 に答える
1

おそらく、親コンテナの高さになります。height: 100%;で行く代わりにwidth:100%;。これが機能しない場合は、コードを貼り付けていただけますか？

于 2012-12-05T15:27:48.503 に答える
0

（@JCBiggarが言ったように）クラスに追加width:100%する必要はありません。また、プロパティを削除します。デフォルトでは次のようになります。.resizeheight:100%height:auto;

HTML：

<div id="maincontainer" >
   <p><i>A Working Title</i></p>
   <div id="img_container">
      <img src="6.jpg" class="resize" /></div>
   <div id="img_text">Caption text</div>
</div>

CSS：

#maincontainer {
   height: 100%;
   max-height:100%;
   width:100%;
}

#img_container {
}

.resize {
   width:100%;
}​

実例（フィドル）：http： //jsfiddle.net/DLJrV/1/

于 2012-12-05T15:35:53.420 に答える