0

私は非営利団体が現在の Web サイトをきれいにするのを手伝っています。javascript を使用して、ボディの背景画像を Web アプリ アイテムの 1 つに動的に変更しました。ただし、画像の幅/最大幅を 100% にする方法がわかりません。同様の質問に関する他の投稿をいくつか読みましたが、それらはすべて親タグの子である画像を参照しています。この場合、画像は body タグ自体にあります。

http://www.fomelc.com/fsdg/franks-test-itemでお気軽にチェックしてください。

洞察やコメントをありがとうございました。

編集:これは私が実装しようとしているコードです:

<html>
<head>
</head>
<body onload="changeback()">
<script>
function changeback(){
var img = "url('{tag_core image_value}')";
var w = window.innerWidth;
var h = window.innerHeight;
img.width = w;

document.body.style.backgroundImage= img;
}
</script>
<table>
<tbody>
<tr>
<td valign="top">{tag_counter}. {tag_name}</td>
</tr>
</tbody>
</table>
</body>
</html>
4

1 に答える 1

0

コードを確認して、JS を介してのみ背景画像を変更し、スタイルシートから広く適用するスタイルを用意することをお勧めします。

JavaScript では、文字列を変数に割り当ててから、その String オブジェクトのプロパティを設定しています。言い換えれば、あなたがやっているとき、要素に影響を与えるのではなく、img.width実際にやっているのです。"url('some/url')".widthJavaScript は非常に寛容な魂であるため、これによってエラーが発生することはありません。

widthmax-width要素のサイジング用です。あなたの場合、body定義による要素は幅全体を占めます。

変更する必要があるのは、要素の背景画像のサイズです。

背景が画像全体を横方向および縦方向にカバーするようにするには、 を使用しますbackground-size: cover。

できることは次のとおりです。

Le HTML :

<html>
<head>
  <!-- jQuery is really not necessary, but handy --> 
  <script type='text/javascript' src='http://code.jquery.com/jquery-2.0.3.min.js'></script>
  <!-- Put your JS in a file and load it -->
  <script type='text/javascript' src='route_to_your_javascript_file.js'></script>
  <!-- Put your CSS in a file and load it -->
  <link type='text/css' href='route_to_your_stylesheet.css' />
</head>
<body>

  <h1>Your Page</h1>

  <!-- This is generally placed at the bottom -->
  <!-- to ensure that the DOM is loaded when -->
  <!-- it gets here. -->
  <script type='text/javascript'>
    $(document).ready(function() {
      // This will be called similarly like the inline onload attribute
      changeBackground({tag_core image_value});
    });
  </script>
</body>
</html>

JavaScript ファイル内:

function changeBodyBackground(url) {
  $('body').css('background-image', url);
}

あなたのCSSファイルで：

body { 
  background: url(default-bg-should-you-need-it.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /* Some IE Love */
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}

Chris Coyierは、それについて非常に優れた記事を書いています。

注: これはテストされていません。不明な点があれば、お知らせください。

それが役に立てば幸い！

于 2013-10-01T21:06:08.367 に答える