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

Question

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

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

它在桌面上运行得很好，但是，如果我没有在上面的 Div 标记中触摸这段代码，使用带有 @media 的 CSS 会很棒。当我在 Div 标记内评论或删除此代码并使用 CSS 使用 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");