1

HTML を使用して、画面の解像度に合わせて画像のサイズを変更できますか? 大きな画面で完全な画像を表示するためにスクロールする必要はなく、小さな画面ではスクロールが必要な場合のように、HTML コードを使用して、特定の縦横比の小さな画面でもスクロールが不要になるようにサイズを変更できますか?

4

5 に答える 5

1

次のように、最大​​サイズを % で設定することで実行できます。

img{
    max-width: 100%;
}    ​
于 2012-05-18T18:42:40.133 に答える
0

javascriptを使用しない限り、どちらwidthかheightを設定することも、両方を設定することもできますが、両方を設定することはできません。100%

CSS3には、次のような優れたプロパティがありますbackground-size。

background:url(../images/myimage.jpg) no-repeat center center;
background-size:cover;

背景サイズの例

IE <9を除いて、ほとんどのブラウザでサポートされています。サポートテーブル：http ：//caniuse.com/background-img-opts

javascriptルートに行くと、スーパーサイズやバックストレッチのような多くのプラグインがあります。

于 2012-05-19T08:03:13.913 に答える
0

スタイリングにおけるパーセンテージ メトリックの全体的な概念は、基本的に画面解像度に基づくビューポートに基づいています。つまり、幅 100% の div は、800x600 では幅 800 ピクセル、1024*768 では幅 1024 ピクセルです。なぜ解決にこだわるのですか？柔軟性が必要な場合は、イメージを % でスタイルします。

例: http://jsfiddle.net/upavn/

于 2012-05-18T19:32:08.687 に答える
0

アクタル、

ある程度、スクロールを無効にしたくない場合があります。ユーザーのズーム設定が高い場合、左右にスクロールしてページを表示できる必要があります。そうしないと、ページの一部が利用できなくなります。例 http://css-tricks.com/screen-resolution-notequalto-browser-window/

このページを拡大すると、Chrome で使用できる左右のスクロールがありません。

それとは別に、 % を使用すると、ほとんどのブラウザーや設定でコンテンツを適切に表示することができます。画像、コンテナー、本文などを高さまたは幅の % で設定できます。写真の縦横比を維持するには、幅を設定してから高さを自動設定する必要があることに注意してください。

<style>
.leftColumn{width:20%;}
.leftColumn{width:80%;}
.somePic{width:20%;height:auto;}
.somePic2{width:80%;height:auto;}
</style>

<body>

<div class="leftColumn">
<img class="somePic" src="somePic.jpg" />
</div>

<div class="rightColumn">
<img class="somePic2" src="somePic2.jpg" />
</div>

</body>

これが受け入れられない場合は、私が知る限り、各ユーザーの画面サイズを取得するためにスクリプト言語を使用する必要があります。報告された画面サイズに応じて、さらに詳細な設定をコーディングできます。

于 2012-05-18T19:12:00.220 に答える
0

これは私にとってはうまくいきます（あなたの質問を明確に理解できることを願っています）

CSS 

  #myimage{
        bottom: 0; 
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        width: 100%;
    }

マークアップ

<img src='xyz.jpg' id='myimage' />

または、これが難しいと思われる場合は、インライン スタイルを使用できます。このコードをbodyタグ内に配置するだけです。

<img src='xyz.jpg' style='bottom:0;left:0;position:fixed;right:0;top: 0;width: 100%; />
于 2012-05-18T19:16:06.113 に答える