HTML CSS 背景图像保持宽度与浏览器宽度相同

标签 html css image

我的网站有背景图片,但背景似乎与浏览器保持相同大小。我将在下面的照片中进行解释,以了解我要解释的内容。

This is what I want to achieve

This is not

顶部图片显示背景适合浏览器,而第二张图片显示背景不适合,因为浏览器已被裁剪到左侧并且大小减半。在这里,我不希望在背景图像之间添加空白,而是希望放大图像。

我不确定这可能是什么问题,感谢您的帮助。

@import compass;
@import url(https://fonts.googleapis.com/css?family=Dosis);
@import url(https://fonts.googleapis.com/css?family=Marvel:400,400italic);
/*
html { 
  background: url(countryside.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
*/
@font-face {
    font-family: 'Guldscript';
    src: url('.eot');
    src: url('guldscript.eot?#iefix') format('embedded-opentype'),
         url('guldscript.woff2') format('woff2'),
         url('guldscript.woff') format('woff'),
         url('guldscript.ttf') format('truetype'),
         url('guldscript.svg#Bruss') format('svg');
    font-weight: normal;
    font-style: normal;
}
html, body{overflow:hidden;}
h1 {
  font-family: Guldscript;
  color: #FCFFF5;
  text-align: center;
  font-size: 30px;
  text-indent: 40px;

}

h2 {
  font-family: Guldscript;
  color: #FCFFF5;
  text-align: center;
  font-size: 20px;
  text-indent: 40px;
}


body {
  margin: 0;
  padding: 0;
  font-family: "Source Sans Pro", sans-serif;
}

header {
  width: 100%;
  padding: 10px 0;
  background-color: #1E1E20;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  z-index: 9999;
  top: 0;
  position: fixed;
}

.container {
  width: 40%;
  margin: 180px auto;
}

.shrink {
  padding: 0.5px 0;
}


.centered {
  position: fixed; 
  top: 70%;
  left: 70%;
  margin-top: -35%;
  margin-left: -35%;
}
.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #1E1E20;
  font-family: Guldscript;
  color: #FDFDFD;
  font-size: 20px;
  text-indent: 40px;
  height:40px;
  padding-top: 20px;
  z-index: 10;

}

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
ul {

    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 10px;
    overflow: hidden;
    background-color: #1E1E20;
    font-family: 'Dosis', sans-serif;
}

li {
    display: inline;
}

li a {
    color: white;
    text-align: center;
    padding: 5px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

p.maintext {
	padding-top: 100px;
	padding-left: 20%;
	padding-right: 20%;
	font-family: 'Marvel', sans-serif;
	color: white;
	background-color: 1E1E20;
	text-align: justify;
}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
<!DOCTYPE html>

<!-- 
	Sunday, 31st January 2016. | I got bored and made this website | v . 01
-->

<html>
	<head>
  <link rel="stylesheet" href="jquery.maximage.css" type="text/css" media="screen" title="CSS" charset="utf-8" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  <script src="js/jquery.cycle.all.js" type="text/javascript"></script>
  <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
  <script src="js/jquery.maximage.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="js/responsiveslides.min.js"></script>
  <title>asd</title>
  <link rel="stylesheet" href="styling.css"/>
  <script type="text/javascript">

    jQuery(document).ready(function() {
       $(document).on("scroll", function(){
        if ($(document).scrollTop() > 100) {
          $(".header").addClass("shrink");
        } else {
          $(".header").removeClass("shrink");
        }
      });
    });
  </script>

  <script>
    $(function (){
      $(".rslides").responsiveSlides({
        auto: true,
        fade: 700,
        speed: 1500,
      });

    });
  </script>

	</head>

	<body>



    <header class="header">
    <nav>
  	<h1>asde</h1>
<!--
    <ul>
      <li><a href="">me</a></li>  
      <li><a href="">photos</a></li>
      <li><a href="">queries</a></li>
      <li><a href="">connect</a></li>
    </ul>
-->
    </nav>

    <!--<h2>Cardiff University</h2>-->
    </header>
	</body>
<!--      <div id="maximage">

    </div>-->
          <ul class="rslides">
      <li><img src="images/home_slideshow/Rugby.jpg" alt="Image of Judgement day, Wales."></li>
      <li><img src="images/home_slideshow/Tractor.jpg" alt="Image of our Tractor."></li>
      <li><img src="images/home_slideshow/Axe.jpg" alt="Image of an Axe."></li>
      </ul>
    <div class="footer">
    <center>asd</center>
    </div>
</html>

最佳答案

您将需要一个宽度为 100vw 且高度为 100vh 的元素(可能是 body,但您可以使用任何元素即绝对定位)。然后,将 CSS 属性 background-image 设置为图片 url,将 background-size 设置为 cover

编辑: 查看我的最小 JSFiddle 示例:https://jsfiddle.net/0vg9omfq/

关于HTML CSS 背景图像保持宽度与浏览器宽度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38282491/

相关文章:

javascript - 通过javascript返回Facebook图片url

php - 使用 MySQLi 从 HTML 表单插入多行到数据库

javascript - 如何在重定向后访问 IFRAME 内的查询字符串参数

html - 导航链接的背景图片

css - Fluid 960 Accordion 扩展

javascript - 无序发生的属性更改的 Angular 事件

linux - linux 中单个文件夹中有 200,000 张图像,是否有性能问题?

reactjs - 有没有办法强制 next.js 让我使用常规图像标签?

javascript - 将光标移至输入末尾

html - 图片在您的网站上的下载顺序是什么?