0

このステートメントを使用して、div タグ内の背景画像を取得します。

 <div data-role="content" data-theme="a" style= "height:100%; background:url    
('./images/tankanzeige.png') center center no-repeat">  
</div>

div を画像と同じサイズにしたいのですが、サイズが間違っていて、画像の 20% しか表示されません。

何を変更する必要がありますか?

4

2 に答える 2

2

画像に合わせてサイズを変更する場合div:

1.画像のサイズがわかっている場合は、div のピクセル サイズを設定する必要があります。たとえば、高さ 100 ピクセル、幅 200 ピクセルです。

<div data-role="content" data-theme="a" style= "height:100px; width: 200px; background:url('./images/tankanzeige.png') center center no-repeat">  
</div>

それ20%は、「親の 20% を取得しようとする」という意味だからです。

2. div 内でイメージ タグを使用する<img>と、div が自動的に拡張されるため、はるかに簡単です。

3. CSS 背景画像を使用する必要があり、画像サイズがわからない場合は、JavaScript を使用して画像サイズを取得する必要があります。Imageまず、新しいオブジェクトを作成する必要があります。

この回答を参照してください: how-to-get-image-size-height-width-using-javascript

そしてそれからのコード：

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

onload画像を最初にロードできるようにするには、イベントが必要であることに注意してください。

div に合わせて CSS 背景のサイズを変更する場合:

CSS3 プロパティを使用できますbackground-size: 100%;

于 2012-07-12T15:20:15.393 に答える
0

画像がウィンドウ サイズより小さい限り、画像全体が div に表示されます。単純化された形式 (質問のコード) では、div がウィンドウ全体を占有します。

そのため、画像が表示されない場合は、大きすぎて使用可能なスペースに収まりません。div にamin-heightおよびmin-width属性を設定して、必要に応じて画像のフル サイズでページをスクロールさせることができます。

デモを見る

于 2012-07-12T15:09:28.133 に答える