JS/JQueryの使用方法背景のDIVタグまたはウィンドウに基づいてイメージの幅/高さを自動的に変更するにはどうすればよいですか?ダイナミックな高さのために自動変更イメージの幅/高さ
-1
A
答えて
0
<div id="background-div">
<img src="xxxx.jpg" width="100%" height="100%"/>
</div>
あなたはあなたが幅を決定するためにjQueryのwidth()
機能の両方を使用することができ、この
var windowHeight = document.getElementsByTagName('body')[0].clientHeight;
document.getElementById("background-div").height = windowHeight + "px";
or
document.getElementById("background-div").style.height = windowHeight + "px";
0
を使用して動的に高さを変更することができますjavascriptを使用してjQuery
.height()
が表示されますウィンドウおよび/またはdivを選択し、画像の幅を割り当てることもできます。
var windowWidth = $(window).width();
$('img').width(windowWidth);
0
jquery width()とheight()メソッドを使用するか、cssを使用すると次のルールを指定できます。
img{ max-width:100%;}
これは、親のdivディメンションに基づいてイメージのディメンションを設定することに注意してください。
0
ここをクリックhttp://www.cssplay.co.uk/layouts/background.html 100%幅を背景にして表示してイメージを作成する方法のデモです。
0
私はこれにcssを使用します。
CSS
.bg-Image {
background-image: url();
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: scroll;
background-color: transparent;
width: desiredWidth;
height: desiredHeight;
}
HTML
<div class="bg-Image"></div>
今すぐあなたも動的背景画像、div要素の幅&高さを変更するためにjqueryのを使用することができます。
background-size: contain;
です。
しかし、これはcss3プロパティです。 < = ie8では動作しません。
関連する問題
- 1. jQueryダイアログでの幅と高さの自動サイズ変更
- 2. ウィンドウの幅/高さを変更するときのdivの自動サイズ変更
- 3. 自動ウェブアプリケーションの高さと幅のリサイズ
- 4. DOMPDFの自動幅と高さ
- 5. のimg自動幅、高さおよび最大高さ
- 6. 寸法、幅/高さの変更のみ
- 7. SWFの幅/高さを変更する
- 8. 変更相対的なレイアウトの幅と高さを動的
- 9. 応答幅の画面幅と高さで動的にJavascriptを変更
- 10. イメージを取得する高さと幅
- 11. イメージを取得する幅と高さ
- 12. ListBoxアイテムの高さで自動サイズ変更
- 13. QTreeWidgetは自動的に行の高さを変更します
- 14. ドロップされた要素の高さと幅を動的に変更します
- 15. イメージのサイズが変更されたときにコンテナの幅を自動調整する方法は?
- 16. テキストボックスの高さ/幅に合わせてフォントサイズを自動的に変更する方法は?
- 17. 方向変更後のUIViewの回転幅/高さの検出
- 18. BottomSheetBehaviorの高さを動的に変更
- 19. 反応グリッドレイアウトのアイテムの高さ/幅をプログラムで変更する
- 20. 画像変更ソース属性jQueryの高さと幅の取得
- 21. as3のswfの高さと幅を変更する問題?
- 22. ブートストラップのモーダルの幅と高さを変更する
- 23. Androidのボタンの幅と高さを変更する方法
- 24. コーデックミラーのTextAreaの高さと幅を変更
- 25. スパンの高さの幅は変更できません
- 26. Javascript関数のサイズ変更ウィンドウの高さと幅
- 27. 散布図のマーカーの幅と高さを変更する
- 28. ヘッダーの固定高さと幅を変更する(HTMLテーブル)
- 29. SmartArtNodeの幅または高さを変更する
- 30. curlViewの高さ、幅を変更するには?