コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

CSS を使用して背景画像を設定します。画像が比較的大きいので、DIV 内に完全に表示するにはどうすればよいですか? _html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 12:12:15
オリジナル
1453 人が閲覧しました

画像が 500*500 で、DIV が 100*100 であることを意味します。では、それを背景画像として設定し、画像の内容全体を表示するにはどうすればよいでしょうか。

これを JS で書きました:
b.style.backgroundImage="url('1.jpg')"
b.style.height="100px ";
画像は表示できますが、完全に表示されないということは、上で設定した高さと幅は効果がありません

これをどう書くか？


ディスカッションへの返信 (解決策)
b.style.backgroundRepeat="repeat";

これには画像のストレッチが必要です。 。 。

参考: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title>?</title><style type="text/css">.divBox { 	width:100px; height:100px; border:solid 1px red;		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='flashbutton.gif' ,sizingMethod= 'scale' );	background-repeat: no-repeat; 	background-positon: 100%, 100%; }</style></head> <body><div class="divBox">test...</div></body></html>
ログイン後にコピー


Format Factory を使用して、まず画像を 100*100 に変換してから、それを div に書き込むことができます

画像の CSS スタイルを設定します。

幅: 100px;

高さ: 100px;


画像がどんなに大きくても、このサイズに従って表示されます。画像がこのサイズより小さい場合は拡大され、画像がこのサイズより大きい場合は縮小されます。

これには画像のストレッチが必要です。 。 。

参考:


HTML コード


OK、完了しました、ありがとう

背景:url(1.jpg);

-webkit-background-size: 100px 60px;
関連ラベル：
使用CSS设置背景图片，图片比较大，怎么完全显示在一个DIV中？
ソース：php.cn
前の記事：あるページのオブジェクト配列を背景なしで別のページに渡す方法、js_html/css_WEB-ITnose を保存する 次の記事：非常に奇妙な！前の div 要素に img 要素がある限り。次の div は前の要素と重なるか、自動的に左にフロートされます。解決策を見つけてください! _html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
2024
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2188
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1843
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1734
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1757
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート