个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 05:35:06 25 4
gpt4 key购买 nike

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

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/

25 4 0
文章推荐： swift - 使用泛型调用具有相同参数但名称不同的另一个函数会在 Swift 中引发错误
文章推荐： javascript - 如何在 WordPress 中的关闭/body 标签后添加 Javascript
文章推荐： c++ - UVM-SystemC库 'make check'错误
文章推荐： c++ - 复制到另一个数组时数组的值发生变化
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com