代码之家 › 专栏 › 技术社区 › principal-ideal-domain

添加应该填充页面的背景图像

css html

-1

principal-ideal-domain · 技术社区 · 7 年前

我使用以下代码在页面上显示背景图像:

#bg-pic {
  top: 0px;
  left: 0px;
  position: fixed;
  z-index: -1;
  margin: 0px;
  width: 100%;
}

#bg-pic > img {
  width: 100%;
  display: block;
}

<div id="bg-pic">
  <img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg" />
</div>

一旦浏览器窗口的比率足够宽,这就可以正常工作。但如果我有一个非常小的窗口,我希望图片仍然覆盖在页面上,而不是 width: 100%; height: 100%; 是正确的。我怎样才能解决这个问题?

编辑: 既然提供的答案不能解决我的实际问题,我们就用一个例子来描述它:

假设我的图片尺寸为100x100,浏览器窗口尺寸为200x100。然后只有上面的100个像素被图片填充。我想要的是,通过放大图片来填充整个浏览器窗口(当然,然后省略图片右侧和左侧对应于图片右侧25和左侧25个像素的区域)。

7 回复 | 直到 6 年前

Quentin 7 年前

background 属性而不是 img 元素。

演示:

body {
  background: url('image.jpg') center center / cover;
}

jsfiddle

就你而言:

html, body {
  min-height: 100%;
}

body {
  margin: 0;
  background: url('bg.jpg') center center / cover;
}

Mathias Rechtzigel 7 年前

可以在图像标记上使用“对象拟合”和“对象位置”属性。

Codepen example

#bg-pic{
    top:0px;
    left:0px;
    position: fixed;
    opacity: 0.18;
    z-index: -1; 
    margin: 0px;
    width: 100%;
    height:100%;
}


#bg-pic img {
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  height: 100%;
}

您可以在CSS技巧中阅读更多关于对象匹配的信息: https://css-tricks.com/on-object-fit-and-object-position/

Neeraj Kamat 7 年前

height:100vh; 在你的img风格标签里, 使用 height:100% 因为除非您为父级指定了静态高度,否则不会应用它 div . 总是一个更好的选择 vh

#bg-pic {
  top: 0px;
  left: 0px;
  position: fixed;
  z-index: -1;
  margin: 0px;
  width: 100%;
}

<div id="bg-pic">

<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg" style="width:100%; height:100vh; display: block;"/>

</div>

nourza 7 年前

body { background-image:url("../images/bg.jpg");
     background-repeat: no-repeat;
     background-size: 100% 100%; }

试试这个

Temani Afif 7 年前

#bg-pic {
  top: 0;
  left: 0;
  position: fixed;
  opacity: 0.5;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

img {
  min-width: 100%;
  min-height: 100%;
  flex-shrink: 0;
}

<div id="bg-pic"><img src="https://picsum.photos/800/800?image=1069" style="" /></div>

Tom_B 7 年前

试试这个,它的跨浏览器兼容:

div {
    position:relative;
}
img {
    max-height: 100%;
    max-width: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

这假设您已经为div指定了一个大小。

vikdotdev 7 年前

background-size: contain . 搭配 height: 100vh

如果需要图像水平居中,可以添加 background-position: 50% 0% 或 background-position: center; 用于水平和垂直定心。

#container-with-background {
	background: url(https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg);
	background-repeat: no-repeat;
	background-size: contain;
	height: 100vh;
}

	<div id="container-with-background">
	</div>

<img> 使用标签可以达到相同的效果 max-width: 100% 和 max-height: 100% 上 <img> height: 500px 100vh 全屏播放。

#container {
	height: 100vh; /* Can be set to fixed value if needed */
}
img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	max-height: 100%;
}

	<div id="container">
		<img src="https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg">
	</div>