Question

我想在我的页面上覆盖整个屏幕宽度的图像。（所以不是整个屏幕，而只是宽度），如果可能的话，我也希望如果屏幕变小，图像会缩小。我之前从未这样做过，所以我真的不知道如何做到这一点？有人能帮助我吗？

this is how my page currently looks like

＆＃13;

@charset "UTF-8";

body {
    background-color: #ADF1F5;
}

html, body{
    margin: 0;
    padding: 0;
}

#Anouk {
	text-align: center;
	margin: 0 auto;
	padding: 0;
}

#Anouk img{
    display: block;
}

#header {
    height: 80px;
    background: #000000;
}

li {
	display: block;
    float: left;
}

li a {
    color: #FFFFFF;
	height: 80px;
}

#contact {
	float: right;
}

＆＃13;

<div id="Anouk">
  <img src="logo/Hout.png" width="1000px" alt="Logo" />
</div>
<div id="header">
  <div id="menu">
    <!--Home-->
    <li id="home">
      <a href="index.html">
        <img src="Iconen/Home.png" height="80px" alt="home" onmouseover="this.src='Iconen/Home2.png'" onmouseout="this.src='Iconen/Home.png'" />
      </a>
    </li>
    <!--Over Mij-->
    <li id="over">
      <a href="over.html">
        <img src="Iconen/Over.png" height="80px" alt="home" onmouseover="this.src='Iconen/Over2.png'" onmouseout="this.src='Iconen/Over.png'" />
      </a>
    </li>
    <!--Portfolio-->
    <li id="portfolio">
      <a href="portfolio.html">
        <img src="Iconen/Portfolio.png" height="80px" alt="home" onmouseover="this.src='Iconen/Portfolio2.png'" onmouseout="this.src='Iconen/Portfolio.png'" />
      </a>
    </li>
    <!--Contact-->
    <li id="contact">
      <a href="contact.html">
        <img src="Iconen/Contact.png" height="80px" alt="home" onmouseover="this.src='Iconen/Contact2.png'" onmouseout="this.src='Iconen/Contact.png'" />
      </a>
    </li>
  </div>
</div>

＆＃13;

Answer 1

您需要将img设置为width =“100％”或在图像上设置css类以获得％。

Answer 2

你需要添加：

margin: 0px;
padding: 0px;

To Body，因为一些浏览器（如chrome）具有标准边距和填充。 PS：我想评论，但我不能因为我的声望很低:(

全宽屏幕上的图片

2 个答案: