画面にフィットしていないdivの背景画像 -- javascript フィールド と html フィールド と css フィールド と image フィールド と background フィールド 関連 問題

Background image of div not fitting in screen












-1
vote

問題

日本語

これは私のコードです。リンクをクリックすると、Background画像をDIVタグに表示しようとしています。しかし、私の背景画像はスクリーンに適合していません(以下に示すように、CSSの高さと幅は少な​​くとも画像全体を表示させることができますが、画面から途中で行われています)。 CSSから高さと幅プロパティを削除すると、イメージはまったく表示されません。

HTML - >

<事前> <コード> <body> <div> <ul> <li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2012'">IT Spend</a></li> <li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2012'">Assessments</a></li> <li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2012'">Information</a></li> <li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2012'">2012</a></li> <li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2013'">2013</a></li> <li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2014'">2014</a></li> <li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2015'">2015</a></li>

<事前> <コード> </div> <div id="wrapper" class="IT_Spend_2012"'></div> </body>

CSS-&GT;

<事前> <コード> #wrapper { background-repeat: no-repeat; width:1500px; height:1100px;} .IT_Spend_2012 { background-image: url('./img/IT_Spend2012.jpg'); } .IT_Spend_2013 { background-image: url('./img/IT_Spend2013.jpg'); } .IT_Spend_2014 { background-image: url('./img/IT_Spend2014.jpg'); } .IT_Spend_2015 { background-image: url('./img/IT_Spend2015.jpg'); }
英語

Here is my code. I am trying to display background images in a div tag on user click of links. But my background image is not fitting to screen (Putting height and width in css as shown below is at least allowing me to display the whole image but it is going way out of the screen). If I remove the height and width property from css, then the image is not displayed at all.

html ->

<body> <div> <ul> <li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2012'">IT Spend</a></li> <li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2012'">Assessments</a></li> <li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2012'">Information</a></li>     <li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2012'">2012</a></li> <li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2013'">2013</a></li> <li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2014'">2014</a></li> <li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2015'">2015</a></li> 

</div> <div id="wrapper" class="IT_Spend_2012"'></div> </body> 

css->

#wrapper { background-repeat: no-repeat; width:1500px; height:1100px;} .IT_Spend_2012 { background-image: url('./img/IT_Spend2012.jpg'); } .IT_Spend_2013 { background-image: url('./img/IT_Spend2013.jpg'); } .IT_Spend_2014 { background-image: url('./img/IT_Spend2014.jpg'); } .IT_Spend_2015 { background-image: url('./img/IT_Spend2015.jpg'); } 
</div
              
 
 

回答リスト

1
 
vote

パーセントを試しましたか?

<事前> <コード> #wrapper { background-repeat: no-repeat; width:100%; height:100%;}

高さはここで難しいかもしれません...

 

Have you tried percents?

 #wrapper { background-repeat: no-repeat; width:100%; height:100%;} 

height may get tricky here...

</div
 
 
 
 
0
 
vote

背景画像は背景画像で、素子の背景に印刷されています。要素自体は背景によってサイズ変更されていません。

あなたができることは要素の幅とアンプを設定することです。背景画像の高さ。 また、次のリンクもチェックしてください。背景、 CSS3背景、 CSS3の背景。

background-size: cover を使用しようとしている場合は、上記の「背景サイズ」リンクのように、画像が完全に表示されないことを留意してください。同じ幅とアンプ。画像としての高さアスペクト比。

 

Background image is a background image, it is printed on element's background. The element itself is not resized by background.

What you can do is set the element's width&height to the background image's. Also check these links: background-size, CSS3 backgrounds, CSS3 background-size.

If you are going to use background-size: cover then keep in mind that your image will not be fully visible like in the "background-size" link above unless, the div you display it on, has the same width&height aspect ratio as the image.

</div
 
 

関連する質問

58  透明なIFRAME本体  ( Transparent iframe body ) 
動的幅と高さを持つ(十字ドメイン)IFRAMEを持つ必要があります。 私の質問は 私は100%サイズとその背後にあるこのIFrameの親を示す透明な背景を持つiFrameを作成できますか? IFrameの背景にCSSプロパティまたは透明なGIFを添付できます...

0  ASP.NETコアMVCロングランニング操作  ( Asp net core mvc long running operation ) 
私は、要求されたトークンに基づいてクエリを実行するASP.NETコアアプリケーションを持ち、ユーザーとして認証された外部システムにアクセスしています。この要求は完了するのに長い時間がかかり、それを非同期にしたいです。私はその作業をオフロードするためにバックグラ...

0  時間に応じて常に変化するRGBコードを使用した背景としての色  ( Color as background using rgb codes that will constantly change according to tim ) 
<事前> <コード> Public Class Form1 Private Sub Timer1_Tick() Handles Timer1.Tick Label1.Text = TimeOfDay Label2.Tex...

-2  なぜ背景があるのですか:Djangoで動作していないCSSのURLは?  ( Why is backgroundurl in css not working with django ) 
私のナビゲーションバーのための次のCSSコードを持っています: <事前> <コード> #footer-navigation { background: #1841c8 url('../images/nav_background.gif'); heigh...

1  アプリが背景とロック画面を実行しているときのIOS4のSIGPIPEエラー  ( Sigpipe error in ios4 when app is running background and lock screen ) 
私のアプリでBSDソケットを使用してiPhone4(iOS4.1)でデータを送受信するために、私のアプリには3つの状況があります: アプリは前景と画面ロックで実行されている、大丈夫です。 アプリはバックグラウンドで実行されていますが、画面はロックされません(...

149  PHPタスクを非同期的に実行します  ( Run php task asynchronously ) 
やや大規模なWebアプリケーションで作業し、バックエンドは主にPHPにあります。いくつかのタスクを完了する必要があるコードにはいくつかの場所がありますが、ユーザーに結果を待つことはしません。たとえば、新しいアカウントを作成するときは、歓迎の電子メールを送信する...

4  IE8に表示されていない背景画像  ( Background image not showing up on ie8 ) 
私は他の質問を読みましたが、どうやすくない - 私は本当にこれを働かせることはできません。 サイトは(再設計されていますので、もう関係なく、HTML5要素を使用しましたが、ブロックとして宣言していませんでした。 フッターのグラデーションは、非IEブラウザで素晴...

0  バックグラウンドでAndroidタスクまたはメソッドを実行していますか?  ( Running android task or method in background ) 
私がしようとしていることは、活動が始まったとき、アプリは彼らがオンラインであるかどうかを確認するためにサーバーを使うことです。現在の問題は、すべてのサーバーを埋め込むまでアプリはフリーズし、使用できなくなります。だから私が今持っているものは: <事前> <コー...

4  DIVの背景画像+ jQueryのスライドショー  ( Slideshow for divs background image jquery ) 
ヘッダーに大きなDIV要素を持っており、多くのテキストの内容とDIVにはいくつかのボックスがあります。そして私はこのdivのためのbgとして大きなimgを持っています、今私はこのdivの背景のスライドショーを作る必要があります:/ DIVの背景画像のスライ...

0  背景イメージXcode6を設定します  ( Set background image xcode6 ) 
これがあなたのために基本的なものではないことを願って、Xcode 6で背景画像を設定するのですか。 サポートされているファイルに保存された* .pngが保存されているイメージが保存されています。 私が必要とするコードの行を見つけることができません。 ありがとう...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有