html - 图片放大

目前，我正在为学校创建一个新的作品集网站，但响应式图像存在一些问题。

问题在于在不同分辨率下缩放比例很奇怪。在1920X1080上可以。但是，当我用笔记本电脑访问该网站时，图像似乎“放大”了。

这是我的代码：

/* 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 class：” homeContainer“”。

希望有人知道解决方案。

谢谢

最佳答案

您可以通过background-size属性来自定义背景。对于您的情况，我建议cover：

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

关于html - 图片放大，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37533403/