2

PhoneGap と jQuery モバイルを使用して iPhone アプリを作成しています。単純なイメージ タグを使用して、幅を 100% に、高さを自動に設定していますが、イメージが適切にスケーリングされず、途切れてしまいます。同じ結果で max-width を使用してみました。どうすればこれを解決できますか？

<div data-role="page">
    <img class="banner" src="..." style="width: 100%; height: auto;">
</div>

私もこれを試しました：

$('img.banner').each(function(){
    $(this).width($(window).width());                      
});
4

3 に答える 3

0

私はあなたの画像が実際にでdivにネストされていると仮定しています、data-role="content"そしてあなたの問題はそのクラスui-contentがデフォルトで15pxのパディングを持っているということです。

これを修正する最も簡単な方法は、そのページのCSSをオーバーライドしてそのパディングを取り除くことです。他の要素に必要な場合は、それらをdivでラップし、それらのdivにパディングを追加します。

例えば

CSS

.imgContPage { padding:0px; }

マークアップ

  <div data-role="page">
    <div data-role="content" class="imgContPage">
    <img class="banner" src="http://dummyimage.com/600x400/000/fff.png&text=PlaceHolder" style="width: 100%; height: auto;">
    </div>
</div>

JSBinへのリンク

または、パディングを補正するために負のマージンを設定することもできますimgが、その場合は、幅が右側までいっぱいになるように計算する必要があります。

于 2012-12-11T20:13:23.293 に答える
0

以前、私は同じ問題を経験しました。私はmin-heightを試しました。maximum-scale=1そして、なぜ両方 minimum-scale=1？試してみてくださいminimum-scale=1。試してみてください

于 2012-11-30T10:12:59.597 に答える
0

わかりました、私は今とてもばかげていると感じています。その画像は、Wordpress Web サイトからの JSON 応答から取得していました。画像を取得するために JSON を解析していたとき、画像のサムネイル バージョンを使用していました (驚いたことに、これは実際にはスケーリングされたサムネイルではなく、メイン画像の 150x150 の正方形をトリミングしただけです)。

だから私は自分の参照を次のように変更しました：

json.page.thumbnail

に

json.page.attachments[0].images.full.url

これで、画像が適切に拡大/縮小されます (幅: 100%、高さ: 自動)。

助けてくれてありがとう

于 2012-12-11T20:26:34.007 に答える