javascript - 没有 CSS 的响应图像否则会弄乱 HTML 页面

Question

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

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

它在桌面上运行良好，但是，如果我没有在上面的 Div 标记中触及这段代码，则将 CSS 与 @media 一起使用会很棒。当我在 Div 标签内评论或删除此代码并使用 CSS 添加相同的图像时，它看起来放大且丑陋，不像在普通的旧静态 HTML 中，所以这就是为什么我试图避免使用 CSS 而不是一种不同的方式，比如可能使用 Javascript。

这是我在 CSS 中使用的代码，结果很难看:

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

它出来时放大且丑陋，我尝试了所有我能做的事情，包括像在 IMG 标签中那样更改高度和宽度，令人沮丧的是它不会像在 html 代码中的 IMG 标签中那样出现。

是否有任何可能的方法使用 Javascript 执行此操作，Phseudo 代码将如下所示:

  <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>

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

Answer 1

当要使用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");