Javascript 没有CSS的响应图像会弄乱HTML页面

我有一个响应网页，在Div标签内我有一个IMG标签，如下所示：

<div id="frontPage">
<img src="img/bg.jpg" height="500px" width="100%">
 </div>

它被放大了，很难看，我尝试了我能做的一切，包括改变高度和宽度，就像在IMG标记中一样，并声明它不会像在html代码中的IMG标记那样出现

在Phseudo代码将遵循的情况下，是否有任何可能的方法使用Javascript实现这一点：

  <script type="text/javascript">

   //Phseudo Code

   if (mobileScreenSize == 480){
      //Mobile Image
      <img src="img/mobileImage.jpg" height="500px" width="100%">
    }
    else
    {
      //Regular desktop image
      <img src="img/bg.jpg" height="500px" width="100%">
     }
  </script>

//Phseudo代码
如果（mobileScreenSize==480）{
//移动图像
}
其他的
{
//常规桌面图像
}

---

我不知道还有什么可以尝试的，我想避免使用CSS，因为它看起来不一样，或者我不知道如何像使用HTMl IMG标记那样显示出来。

当你想使用CSS修改背景图像时，你需要设置“background size”属性。比如说,

#frontPage{
max-width: 100%;
height: 450px;
background: url(img/bg.jpg) no-repeat left 0px ;
background-size: 100% 450px;
}

如果您想采用javascript方法，那么这也很好，您将图像添加到div的方式是这样做的

var elem = document.createElement("img");
elem.setAttribute("src", "img/bg.jpg");
elem.setAttribute("height", "450px");
elem.setAttribute("width", "100%");
document.getElementById("frontPage").appendChild("elem");

---

太好了，CSS方法成功了，我不敢相信我忘记了CSS主体“背景大小”中的一小段代码，谢谢

var elem = document.createElement("img");
elem.setAttribute("src", "img/bg.jpg");
elem.setAttribute("height", "450px");
elem.setAttribute("width", "100%");
document.getElementById("frontPage").appendChild("elem");