个人中心
gpt4 book ai didi

javascript - 调整 div 的背景图像大小以始终适合移动设备上的 div

转载 作者：行者123 更新时间：2023-11-28 19:31:40 28 4
gpt4 key购买 nike

我想知道如何做到无论您在哪个屏幕上，“标题”div 中的背景始终具有正确的大小。它应该占据窗口的 90%。如果您查看我的代码，我想您会明白我的意思。

我的背景图片是 3840x2400。如果您要使用那个尺寸的图像，我想您会明白我的问题出在哪里？

编辑:

@MarcHjorth 解决方案在桌面上对我有用，但现在在手机上查看时图像太大且被裁剪了..

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}
body {
  padding: 0;
  margin: 0;
  border: 0;
  background-color: grey;
  background-attachment: fixed;
  background-size: 100% auto;
}
ul#horizontal-list {
  list-style: none;
}
ul#horizontal-list li {
  display: inline;
}
ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: center;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
li a:hover {
  background-color: red;
}
.navbar {
  position: fixed;
    top: 0;
    height: 50px;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
    left: 0;
    right: 0;
    z-index: 1;
}
.navbar ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  margin-top: 0px;
}
.header {
	width: 100%;
	height: 100%;
	background-image: url("img/bg/background1.png");
	background-color: grey;
	background-repeat: no-repeat;
	background-size: cover;
}
.body {
  width: 100%;
  background-color: white;
  color: black;
  padding-left: 5%;
  padding-right: 5%;
  overflow: hidden;
}
.content {
	margin: auto;
	width: 100%;
	background-color: white;
	color: black;
	border-right: double;
	border-left: double;
	text-align: justify;
	font-size: 20px;
	font-family: arial;
	padding: 10% 5%;
}
.footer {
  height: 50px;
  width: 100%;
  background-color: black;
  color: white;
  margin: auto;
  vertical-align: middle;
}
#copyright {
	display: table;
}
#cpy {
    display: table-cell;
    vertical-align: middle;
}
<!DOCTYPE html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <meta name="description" content="My Personal Portfolio">
  <title>John's Work</title>
</head>
<body>
  <div class="navbar">
    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
  </div>
  <div class="header"></div>
  <div class="body">
  <div class="content">      
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac ipsum non diam faucibus dignissim. Praesent a dolor tincidunt, rutrum diam ut, convallis orci. Maecenas eleifend, sapien id blandit rutrum, enim augue cursus magna, vitae varius orci nulla eu arcu. Cras ultrices condimentum libero nec vulputate. Praesent id ante dignissim, congue elit id, iaculis eros. Aliquam lacus quam, facilisis et pulvinar quis, hendrerit varius erat. Duis feugiat imperdiet lobortis. Ut et faucibus dui. Integer quis bibendum tortor, at mattis dolor. Sed id lacus nec nisi iaculis blandit. Duis nec ligula orci. Quisque tincidunt, orci id tincidunt consequat, eros erat dictum urna, vel ultricies sem nisl eu nunc. Nulla facilisi. Suspendisse at malesuada magna, in suscipit purus.

Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada. Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut mi nisi, mattis sed est a, luctus aliquet metus. Integer fringilla, massa nec laoreet dapibus, odio sem convallis massa, a vestibulum tellus mi in massa. Sed at vulputate velit, id sagittis sem. Vestibulum ac libero massa. Vivamus et libero vel orci auctor sodales a a quam. Vivamus semper tortor eget lacus euismod, non dignissim tellus feugiat. Donec tincidunt nisi at ornare ullamcorper. Nulla at mi nulla. Phasellus ligula ante, vehicula sit amet mauris et, consectetur mollis odio.

Donec massa risus, ultricies et enim quis, vestibulum consectetur arcu. Nunc sed convallis dui, sagittis imperdiet metus. Sed non ultrices velit. Nullam arcu sem, varius non pulvinar id, convallis eget erat. Nam porta tincidunt lorem, non venenatis sapien hendrerit vitae. Suspendisse nec est leo. Nunc commodo, lectus nec facilisis laoreet, ex velit dapibus dui, et aliquet lacus est non velit. Vestibulum nisl velit, tempor vel lacus at, ultricies pellentesque nisi. Mauris velit tortor, aliquam a magna eget, efficitur fringilla erat. Praesent massa nisl, maximus sit amet viverra in, varius vel urna.

Pellentesque eget leo vitae neque dictum egestas at ullamcorper nulla. Aenean lacinia venenatis metus, in faucibus dolor sollicitudin eget. Sed volutpat sit amet urna vel molestie. Donec dignissim velit tortor, a blandit ligula commodo dapibus. Vestibulum ac dolor facilisis mauris maximus mattis. Nullam vitae libero ut ligula sodales accumsan et vel dui. Quisque dapibus, lacus accumsan interdum efficitur, tellus augue maximus ipsum, quis ultricies dolor justo in diam. Pellentesque id lobortis diam. Suspendisse mollis eget orci eu auctor. Nullam porttitor arcu mi, nec varius magna viverra quis. Fusce eleifend sodales turpis et hendrerit.
  </div>
</div>
  <div class="footer" id="copyright" style="text-align:center">
    <div id="cpy">&copy; DA COSTA JOAO (2019)</div>
  </div>
</body>
</html>

最佳答案

使用 background-size: 100% 100%;而不是 background-size: contain;这样你的图片就适合宽度 <div> 

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  padding: 0;
  margin: 0;
  border: 0;
  background-color: grey;
  background-attachment: fixed;
  background-size: 100% auto;
}

ul#horizontal-list {
  list-style: none;
}

ul#horizontal-list li {
  display: inline;
}

ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: center;
}

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

li a:hover {
  background-color: red;
}

.navbar {
  position: fixed;
    top: 0;
    height: 50px;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
    left: 0;
    right: 0;
    z-index: 1;
}

.navbar ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  margin-top: 0px;
}

.header {
	width: 100%;
	height: 100%;
	background-image: url("https://dummyimage.com/3840x2400/ccc/333");
	background-color: grey;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.body {
  /*height: 100%;*/
  width: 100%;
  background-color: white;
  color: black;
  padding-left: 5%;
  padding-right: 5%;
  overflow: hidden;

}

.content {
	margin: auto;
	width: 100%;
	background-color: white;
	color: black;
	border-right: double;
	border-left: double;
	text-align: justify;
	font-size: 20px;
	font-family: arial;
	padding-top: 10%;
	padding-bottom: 10%;
	padding-left: 5%;
	padding-right: 5%;
}

.footer {
  height: 50px;
  width: 100%;
  background-color: black;
  color: white;
  margin: auto;
  vertical-align: middle;
}

#copyright {
	display: table;
}

#cpy{
    display: table-cell;
    vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <meta name="description" content="My Personal Portfolio">
  <title>John's Work</title>
</head>

<body>


  <div class="navbar">

    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>

  </div>


  <div class="header">

  </div>

  <div class="body">
  <div class="content">
  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac ipsum non diam faucibus dignissim. Praesent a dolor tincidunt, rutrum diam ut, convallis orci. Maecenas eleifend, sapien id blandit rutrum, enim augue cursus magna, vitae varius orci nulla eu arcu. Cras ultrices condimentum libero nec vulputate. Praesent id ante dignissim, congue elit id, iaculis eros. Aliquam lacus quam, facilisis et pulvinar quis, hendrerit varius erat. Duis feugiat imperdiet lobortis. Ut et faucibus dui. Integer quis bibendum tortor, at mattis dolor. Sed id lacus nec nisi iaculis blandit. Duis nec ligula orci. Quisque tincidunt, orci id tincidunt consequat, eros erat dictum urna, vel ultricies sem nisl eu nunc. Nulla facilisi. Suspendisse at malesuada magna, in suscipit purus.

Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada. Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut mi nisi, mattis sed est a, luctus aliquet metus. Integer fringilla, massa nec laoreet dapibus, odio sem convallis massa, a vestibulum tellus mi in massa. Sed at vulputate velit, id sagittis sem. Vestibulum ac libero massa. Vivamus et libero vel orci auctor sodales a a quam. Vivamus semper tortor eget lacus euismod, non dignissim tellus feugiat. Donec tincidunt nisi at ornare ullamcorper. Nulla at mi nulla. Phasellus ligula ante, vehicula sit amet mauris et, consectetur mollis odio.

Donec massa risus, ultricies et enim quis, vestibulum consectetur arcu. Nunc sed convallis dui, sagittis imperdiet metus. Sed non ultrices velit. Nullam arcu sem, varius non pulvinar id, convallis eget erat. Nam porta tincidunt lorem, non venenatis sapien hendrerit vitae. Suspendisse nec est leo. Nunc commodo, lectus nec facilisis laoreet, ex velit dapibus dui, et aliquet lacus est non velit. Vestibulum nisl velit, tempor vel lacus at, ultricies pellentesque nisi. Mauris velit tortor, aliquam a magna eget, efficitur fringilla erat. Praesent massa nisl, maximus sit amet viverra in, varius vel urna.

Pellentesque eget leo vitae neque dictum egestas at ullamcorper nulla. Aenean lacinia venenatis metus, in faucibus dolor sollicitudin eget. Sed volutpat sit amet urna vel molestie. Donec dignissim velit tortor, a blandit ligula commodo dapibus. Vestibulum ac dolor facilisis mauris maximus mattis. Nullam vitae libero ut ligula sodales accumsan et vel dui. Quisque dapibus, lacus accumsan interdum efficitur, tellus augue maximus ipsum, quis ultricies dolor justo in diam. Pellentesque id lobortis diam. Suspendisse mollis eget orci eu auctor. Nullam porttitor arcu mi, nec varius magna viverra quis. Fusce eleifend sodales turpis et hendrerit.
  </div>
</div>

  <div class="footer" id="copyright" style="text-align:center">
    <div id="cpy">&copy; DA COSTA JOAO (2019)</div>
  </div>



</body>

</html>

关于javascript - 调整 div 的背景图像大小以始终适合移动设备上的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54880588/

28 4 0
文章推荐： html - :target pseudo selector not selecting target
文章推荐： html - 如何将div一个放在另一个下面？
文章推荐： ios - 在 Objective - C 中创建具有适当格式和图像的 PDF
文章推荐： ios - 当我声明 STPPaymentCardTextField() 实例时应用程序崩溃
行者123
个人简介

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

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