全寬屏幕上的圖片

我想在我的頁面上顯示屏幕全寬。（所以不是整個屏幕，但只有寬度），如果可能的話，我還想如果圖像縮小，如果屏幕變小。我從來沒有這樣做過，所以我不知道如何做到這一點？有誰能夠幫助我？全寬屏幕上的圖片

this is how my page currently looks like

@charset "UTF-8"; 
 

 
body { 
 
    background-color: #ADF1F5; 
 
} 
 

 
html, body{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#Anouk { 
 
\t text-align: center; 
 
\t margin: 0 auto; 
 
\t padding: 0; 
 
} 
 

 
#Anouk img{ 
 
    display: block; 
 
} 
 

 
#header { 
 
    height: 80px; 
 
    background: #000000; 
 
} 
 

 
li { 
 
\t display: block; 
 
    float: left; 
 
} 
 

 
li a { 
 
    color: #FFFFFF; 
 
\t height: 80px; 
 
} 
 

 
#contact { 
 
\t float: right; 
 
}

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

來源

2015-10-19 anouxy

您需要設置您的IMG到WIDTH = 「100％」或設置一個CSS類的任何％的圖像。

來源

2015-10-19 14:11:37 Hexana

感謝您的幫助 – anouxy

很高興已經有一定的幫助 – Hexana

而且你需要添加：

margin: 0px; 
padding: 0px;

的身體，因爲有些瀏覽器（如鉻）是具有一個標準的margin和padding。 PS：我想發表評論，但我不能因爲我的名聲是低:(

來源

2015-10-19 14:20:21 Tom291

這不會對各種屏幕的圖像寬度爲100％！從OPs屏幕截圖瀏覽器應用的默認邊距似乎沒有問題 – hungerstar

我知道這只是對Hexana的答案的補充：D – Tom291

答案不是評論請不要這樣做，直到你有足夠的代表這樣做可能會讓你降低價格，這會傷害你的代表 – hungerstar

全寬屏幕上的圖片

回答

相關問題