logo标签列表

适应背景图像到div容器

htmlcssbackground-image
493

我在以下 div 中设置了一个背景图，但是这个图被裁剪了：

 <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">

有没有办法显示背景图片而不被裁剪掉？

图片比 div 更大吗？ - grc
1
是的，图片比 div 更大。 - Rajeev
6
背景图片：url(/media/img_1_bg.jpg); 背景大小：包含； 背景重复：不重复。 - Waruna Manjula
8个回答
946

您可以使用background-size属性来实现这一点，该属性现在被大多数浏览器支持。

将背景图片缩放以适应div大小：

background-size: contain;

为了使背景图片覆盖整个div：

background-size: cover;

JSFiddle示例或可运行的代码片段：

#imagecontainer {
  background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
  width: 100px;
  height: 200px;
  border: 1px solid;
  background-size: contain;
}
<div id="imagecontainer"></div>

还存在一个适用于IE 5.5+支持的过滤器，以及一些旧浏览器的供应商前缀。

197
6
有没有一种方法可以在不拉伸图片的情况下使背景图适应尺寸？ - Junaid
1
然而，纵横比丢失了。 - Learner
1
@学习者 如果你改变一张图片的尺寸而不裁剪它，99%的情况下宽高比都会丢失。这是常识。 - Vaibhav Vishal
35

你可以使用这些属性：

background-size: contain;
background-repeat: no-repeat;

然后你的代码就像这样:

 <div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">
15
background-position-x: center;
background-position-y: center;
欢迎来到Stack Overflow！请解释您的答案以使其更有帮助。https://stackoverflow.com/help/how-to-answer https://stackoverflow.com/tour - ethry
10

你也可以使用这个：

background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;

我不知道你的div值是什么，但是假设你已经有了这些值。

height: auto;
max-width: 600px;

再次强调，这些只是随机数字。 如果你想要为div设置背景图（假设你需要），可能很难将其固定宽度，因此最好使用max-width。实际上，用背景图填充div并不复杂，只需确保正确地设置父元素的样式，以便图像有可以放置的位置。

Chris

1
以下是与此解决方案更详细讨论的高票答案链接：https://dev59.com/6HRB5IYBdhLWcg3wgXdV，该链接还展示了如何计算“padding-top”。 - John Lee
8

尝试以下任何一种方法：

background-size: contain;
background-size: cover;
background-size: 100%;

.container{
    background-size: 100%;
}

background-size 属性指定背景图片的大小。

您可以使用不同的语法来设置此属性：关键字语法（"auto"，"cover"和"contain"），一个值语法（设置图像的宽度（高度变为“自动”）），两个值语法（第一个值：图像的宽度，第二个值：高度）。

  • 百分比 - 将背景图片的宽度和高度设置为父元素宽度的百分比。
  • 覆盖 - 调整背景图片的尺寸以覆盖整个容器，即使必须拉伸图片或裁剪一些边缘。
  • 包含 - 调整背景图片的尺寸以确保完全可见。

更多信息请参阅：https://www.w3schools.com/cssref/css3_pr_background-size.asp

欢迎来到stackoverflow！请解释您的答案以使其有帮助。https://stackoverflow.com/help/how-to-answer https://stackoverflow.com/tour - ethry
2

您还可以尝试这样设置，将背景大小设置为覆盖，并使背景位置居中，以使其看起来更漂亮，如下所示：

background-size: cover;
background-position: center ;
2

备选方案：

background-size: auto 100%;
欢迎来到stackoverflow！请解释您的答案以使其有帮助。https://stackoverflow.com/help/how-to-answer https://stackoverflow.com/tour - ethry
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接