画像拡大

現在、私は学校用の新しいポートフォリオウェブサイトを作っていますが、レスポンシブ画像にはいくつかの問題があります。画像拡大

問題は、異なる解像度でスケーリングが非常に奇妙であることです。 1920年から1080年にかけては大丈夫です。しかし、私がラップトップのサイトにアクセスすると、画像が「ズームイン」されているように見えます。

Screenshot 1366X768 (Laptop) http://image.prntscr.com/image/132831e50e5e4e88aa3eac114aeedac0.png

これは私のコードです：

/* GENERAL */ 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
/* END OF GENERAL */ 
 

 
/* NAVBAR */ 
 
nav.navbar { 
 
    margin-bottom: 0; 
 
    padding-bottom: 0; 
 
} 
 
/* END OF NAVBAR */ 
 

 
/* HOMEPAGE */ 
 
.homeContainer { 
 
    background-image: url(/img/homepageDesk.png); 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
} 
 
/* END OF HOMEPAGE */

<!DOCTYPE html> 
 

 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Portfolio - MAND</title> 
 
    
 
    <!-- CSS Links --> 
 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
 
</head> 
 
    <!-- NAVIGATION MENU --> 
 
    <nav class="navbar navbar-default"> 
 
     <div class="container-fluid"> 
 
      <!-- Navbar title --> 
 
      <div class="navbar-header"> 
 
       <a class="navbar-brand" href="#">Title</a> 
 
      </div> 
 
      <!-- Navbar buttons --> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#">Home</a></li> 
 
       <li><a href="#">Over mij</a></li> 
 
       <li><a href="#">Projecten</a></li> 
 
       <li><a href="#">Stageblog</a></li> 
 
       <li><a href="#">Contact</a></li> 
 
      </ul> 
 
      <!-- Navbar login (Float: right) --> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
    <!-- END OF NAVIGATION MENU -->  
 
    
 
    <!-- HOME CONTENT --> 
 
    <div class="homeContainer"> 
 

 
    </div> 
 
    <!-- END OF HOME CONTENT --> 
 
</body> 
 
</html>

背景があるように私がイメージを置くDIV： "のdivクラス：" homeContainer」」。

誰かが解決策を知っていたらうれしいです。

おかげ

出典

2016-05-30 Nieck

あなたはbackground-sizeプロパティで背景をカスタマイズすることができます。あなたのケースでは、私はcoverをお勧め：ここ

.homeContainer { 
    background-image: url(/img/homepageDesk.png); 
    background-size:cover; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
}

より多くの情報：http://www.w3schools.com/cssref/css3_pr_background-size.asp

出典

2016-05-30 20:42:38

にそれが動作感謝をあなたのコードを変更します！ – Nieck

よろしくお願いいたします。 'background-size'は' background-image'の後にあるべきであり、他のブラウザでは動作しないことを思い出してください。 –

この

/* HOMEPAGE */ 
.homeContainer { 
    background-image: url(/img/homepageDesk.png) no-repeat fixed; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
} 
/* END OF HOMEPAGE */

出典

2016-05-30 22:29:29 T04435

答えて

関連する問題