0

当我将图像设置为背景时，我无法将某个图像的大小调整为我拥有的容器的尺寸。

#container {
    position: relative;
    height: 400px;
    width: 600px;
    left: 15%;
    border: 1px solid black;
    margin: 0;
    background-repeat: no-repeat;
}
<script language="JavaScript">
  function option1() {
    background="url('image.png')";
    document.getElementById('container').style.backgroundImage = background;
  }
</script>
.
.
.
.
<a href="#" id="b1" onclick ='option1()'>x</a>

我基本上是在尝试让我的链接（它们是 x）在单击它们时更改容器的背景。图像都有不同的大小，我正在尝试找到一种方法来更改或调整图像大小以适应容器，因为我正在调用该函数。我找不到任何东西，所以我放弃了，只是在图像编辑器中手动将每个图像调整为容器大小。有没有其他方法可以解决这个问题？我对 Javascript 有点陌生，我尝试查看其他代码，但有时它只会让我陷入循环。

__________________________________________
|                                        |
|                                        |
|                                        |
|__________________________________x_x_x_|
4

1 回答 1

1

你可以在这里看到它的作用：http: //jsfiddle.net/Shmiddty/Akypk/

相关的 CSS 是：

background-size:100% auto;

图像将填充容器的宽度，其高度将按比例缩放。

于 2012-10-10T23:01:54.420 回答