HTML、ウェブページを画面に合わせるにはどうすればよいですか？

私はアンドロイドのためのアプリケーションを開発しています。私のアプリケーションは、いくつかの高品質の画像のために非常に大きなサイズ（APKfile）を持っています。私はそれをサーバーとアプリケーションに移すことに決めました。ウェブページを読み込んでウェブページに表示しました。各HTMLページは1つのイメージ（テキストやその他のアイテムなし）を持ち、すべてのイメージの幅は450ピクセルですが、各イメージの高さは異なる場合があります。ウェブページを読み込むと、画像が画面に合わず、画面よりも大きくなります。私は画面にフィットするイメージを持つ必要があります。HTML、ウェブページを画面に合わせるにはどうすればよいですか？

私はサーバーからイメージを読み込むことができますが、私がそれを行ったときには、アスペクト比がうまくいかず、イメージが押しつぶされたことがわかりました。その幅は伸び、高さは効きませんでした。私が使用したコードはandroid:scaleType="fitXY"

でした。何らかの理由で私はコードを完全に変更したくないため、htmlファイルに変更を加える方法を見つけるのが好きです。私のhtmlファイルは次のとおりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Team Championship</title> 
    </head> 


    <body> 
     <img align="left" alt="Team Championship" src="../image/team_championship.png"/> 

    </body> 
</html>

、すべてのデバイスの画面にフィット画像を持つことが可能であるか、教えてください？申し訳ありませんが、私はAndroidプログラミングでは悪くないですが、私はWebプログラミングに精通していません。おかげ

出典

2012-02-27 Hesam

イメージを伸縮させたくない場合は、 'scaleType'に' CENTER_INSIDE'を使います。 'FITXY'は画像をコンテナと同じ大きさにします。コンテナのアスペクト比が異なると動作しません。 –

みんなありがとう、

が、より簡単かつ最速の方法は、これに上記の画像のコードを変更している。

<img align="left" alt="Abudhabi" src="../image/track_abudhabi.png" width="100%"/>

は今、すべてのデバイスに画像がスクリーンに適合しています。

出典

2012-02-27 08:13:53 Hesam

あなたのイメージの大きさを知っている場合は、あなただけの高さのチェックを追加するには、Web表示のスケール、例えば：

DisplayMetrics displayMetrics = new DisplayMetrics(); 
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics); 

int imgWidth = ...; 
int imgHeight = ...; 

if(imgWidth > displayMetrics.widthPixels) { 
    int scaleInPercent = 100 * displayMetrics.widthPixels/imgWidth; 
    m_webView.setInitialScale(scaleInPercent); 
}

を設定することができますし、あなたが行ってもいいはずです。

出典

2012-02-27 07:19:17 Macondo2Seattle

私はモバイルサイトで働いていました。テストデバイスはiPod Touchと2台のAndroid携帯電話でした。 iPod Touchでは問題はないが、Androidの携帯電話はイメージをフルサイズにすることを主張していた。画像の約25％しか見ることができませんでした。私は「グラフィックスを装備したウェブページに合わせて」検索し、ここで私を導きます。

width = "100％"の追加は、私の問題に必要なだけ正確に機能しました。シンプル！ありがとう。

出典

2012-03-30 21:30:31 Audra

あなたはWebViewのを使用している場合は、最良かつ最も簡単な方法は、headタグ内のスタイルタグを追加することです。このよう

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <style> 
      img{ 
       max-width:100%; 
       height:auto; 
       display:block; 
       margin-left:auto; 
       margin-right:auto; 
      } 
     </style> 
     <title>Team Championship</title> 
    </head> 


    <body> 
     <img align="left" alt="Team Championship" src="../image/team_championship.png"/> 

    </body> 
</html>

、すべての画像が適合していると中心。

出典

2014-02-26 13:24:48 Nissar

HTML、ウェブページを画面に合わせるにはどうすればよいですか？

答えて

関連する問題