Question

目前我正在为学校制作一个新的投资组合网站，但我在回复图片时遇到了一些问题。

问题在于缩放在不同的分辨率上非常奇怪。在1920X1080，它很好。但是，当我在笔记本电脑上访问该网站时，它看起来像是放大了＃34;。

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

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

我把图像作为背景的div是：＆＃34; div class：＆＃34; homeContainer＆＃34; ＆＃34;

希望有人知道解决方案。

由于

Answer 1

您可以按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

Answer 2

将您的代码修改为此

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

图像放大了

2 个答案: