Question

我对网络开发很陌生。我有html / css的基本经验，我正在使用bootstrap创建一个网站，只是为了教我自己。我希望我的图像覆盖整个页面，当我减小浏览器的大小时它会这样做但是当使用全屏时它会在侧面添加填充。

我已经尝试了一些修复它的方法，例如将填充更改为-20px或使overflow-x隐藏但似乎无法修复它。

引导代码

<div id="banner" class="container-fluid">
        <div class="col-lg-12 nopadding">
            <img src="images/headercopy.jpeg">
        </div>
</div>

css代码

html, body {
    line-height: 1.8;
    background-color: rgb(0, 0, 0);
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

h3 {
    text-align: center;
    color: white;
}

.nav {
    color: white;
}

.navbar-transparent .navbar-brand {
    color: white; //nightalreadycolor
}

.navbar-collapse .page-scroll {
    color: white; //nightalreadycolor
}

.navbar-transparent .navbar-brand:hover, .navbar-transparent .navbar-brand:focus {
    background-color: transparent;
    color: #c8e8f4; //light blue
}

.navbar .navbar-transparent .navbar-fixed-type {
    background-color: red;
}

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}

.aboutimage {
    background-size: 100% 100%;
}

img {
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}

#about {
    color: white;
    height: 600px;
    margin-right: 15px;
    text-align: justify;
}

#about p {
    display: block;
    font-size: 20px;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    color: white;
}

#about p img {
    padding-top: 5px;
    outline: solid #f00 1px !important;
}

.container {}

#fleet {
    border-right: thin solid black;
    color: white;
    width: 50%;
    height: 600px;
    float: left;
    background-color: grey;
}

#fleet h1 {
    text-align: center;
}

#fleet h2 {
    padding-right: 10%;
    float: right;
}

#rates {
    color: white;
    width: 50%;
    height: 600px;
    float: right;
    background-color: #574951;
}

#rates h1 {
    text-align: center;
}

#contact {
    text-align: center;
    height: 600px;
    color: white;
    background-color: #574951;
}

#reservation {
    display: inline-block;
    height: 600px;
    color: white;
    text-align: center;
}

很抱歉，如果我的某些代码看起来像多余或低效，就像我说的那样，我仍然很新。如果您需要任何其他信息，请告诉我。

Answer 1

使用图像作为背景。因此，如果您要填写#banner div，那么您的css将是这样的：

#banner {
    background-image:    url('images/headercopy.jpeg');
    background-size:     cover;
    background-repeat:   no-repeat;
    background-position: center center;
}

然后你只需要使用这个标记：

<div id="banner" class="container-fluid"></div>

当然，您可以设置#banner所需高度的css代码等。

使用bootstrap / css时在图像旁边填充

1 个答案: