0

我正在帮助一家非营利组织清理他们当前的网站，并使用 javascript 将主体的背景图片动态更改为他们的 Web 应用程序项目之一。但是，我无法弄清楚如何强制图像的宽度/最大宽度为 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 中，您将一个字符串分配给一个变量，然后设置该字符串对象的属性。换句话说，当你在做的时候img.width，你实际上是在做"url('some/url')".width而不是影响任何元素。这不会引发任何错误，因为 JavaScript 是一个非常宽容的灵魂。

width并且max-width用于元素大小。在您的情况下，body根据定义，元素占据了整个宽度。

您需要更改的是元素背景图像的大小。

要让背景水平和垂直覆盖整个图像，请使用background-size: cover.

这是你可以做的：

乐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 回答