如何插入图片并将其放入 <head> 标签答案

【问题标题】：How to insert a Picture and fit it in <head> tag如何插入图片并将其放入 <head> 标签
【发布时间】：2016-10-17 16:53:19
【问题描述】：

这是我的问题：

<!Demo html>
<html>
<head>

 <img src="html\111.jpg" alt="can't be displayed" align="center">

</head>

<body>

</body>

我只是想把图片放到屏幕上

【问题讨论】：

你为什么要这样做？ img 标签进入body。
在 url 中最好使用斜杠而不是反斜杠。
超出 html 和编程标准。
` ` 和 img 在 head 标签内？ -_-

标签： html css

【解决方案1】：

如果我正确理解您的问题，您希望图像覆盖屏幕，那么这是解决您问题的最简单方法：

<!DOCTYPE html>
<html>
<head>


</head>

<body>
 <img src="html\111.jpg" alt="can't be displayed" align="center" width="100%" height="100%">
</body>

但如果您的意图实际上是将图像用作背景，我强烈建议将其作为背景图像（使用 CSS）添加到 body 元素。

编辑：

使用 css：

html, body {
  width: 100%;
  height: 100%;
}

body {
  background: url( html/111.jpg ) 100% 100%;
}

另外，不要忘记在 .html 文件中链接到 .css。

<head>
    <link rel="stylesheet" href="css/styles.css">
</head>

【讨论】：

<!Demo html>你们能解释一下吗？？
我没有注意到那个错字。真的很抱歉，但我无法解释。
它没有填满整个屏幕看看结果的边缘
@ahmadfakeer 这可能是因为元素不是元素的 100% 宽度和高度，请参阅我的更新答案以获得更好的解决方案。

【解决方案2】：

对于head标签内......

<!DOCTYPE html>
<html>
  <head>
     <style type="text/css">
			body { background: url(url of the image) !important; }
			</style>
   </head>
  <body>
    yourbody
    </body>
  </html

【讨论】：

【解决方案3】：

我想这就是你想要的！

<!DOCTYPE html>
<html>
<head>
</head>

<body>
  <header>
    <img src="html/111.jpg" alt="can't be displayed" align="center" width="100%" height="100%">
  </header>
</body>

【讨论】：

【解决方案4】：

在这个 sn-p 中，只需将 src 代码替换为您的链接。

<!Demo html>
<html>
<head>
<style>
 .img{
  top:0px;
  left:0px;
  position:absolute;
  height:100%;
  width:100%;
} 
 </style>
</head>

<body>
<img src="http://wallpapersrang.com/wp-content/uploads/2015/12/wallpapers-for-3d-desktop-wallpapers-hd.jpg" alt="can't be displayed" align="center" class="img">
</body>

【讨论】：

<!Demo html>你们能解释一下吗？？