2016-08-15 51 views
-1

我是初學者級別的前端開發人員,我需要幫助在psd到html當我切片 圖像的大小是1920px和在html中,div大小是100%,但圖像將離開瀏覽器。我的錯誤有什麼好心的幫助我,我應該做些什麼才能讓它變得更好我想學習PSD到html。 也指導我如何在Adobe Photoshop中使用切片工具?psd html切片錯誤

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

 
#wrap{ 
 
     width: 1920px; 
 
     background-color: #e7e7e7; 
 
} 
 
.menu{ 
 

 
     width: 100%; 
 
     background-color: #202628; 
 
} 
 

 
.slider{ 
 
    width: 100%; 
 
    
 
}
<html> 
 
    <head> 
 
     <title>psd to html</title> 
 
     <meta charset="utf-8" content="text/html" http-equiv="content-type"> 
 
     <link href="css/index.css" type="text/css" rel="stylesheet"> 
 
     
 
    </head> 
 
    <body> 
 
     
 
     <div id="wrap"> 
 
      <header> 
 
       
 
       <ul class="menu"> 
 
        <li><a href="index.html">SiteName</a></li> 
 
        <li><a href="index.html">Home</a></li> 
 
        <li><a href="index.html">About</a></li> 
 
        <li><a href="index.html">Services</a></li> 
 
        <li><a href="index.html">Portfolio</a></li> 
 
        <li><a href="index.html">Contact</a></li> 
 
        
 
       </ul> 
 
       
 
       <div class="slider"> 
 
        <img src="images/banner.png" alt="banner"> 
 
       </div><!-- end slider--> 
 
       
 
      </header><!--end header--> 
 
     </div><!-- end wrap --> 
 
     
 
     
 
    </body> 
 
</html>

enter image description here

回答

0

你應該爲圖像添加標籤的CSS,也刪除您#wrap的固定寬度,並應用最大寬度。

試試這個:

#wrap{ 
    max-width:1920px; 
    width:100%; 
} 

.slider img{ 
    width: 100%; 
    max-width:100%;  
} 
+0

仍然沒有改變 – umair

+0

更新我的回答..try這個.. –

+0

謝謝:)可以請你指導我的原因是什麼? :) – umair