适合背景图像div

我有一个背景图像在下面的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">

有没有办法显示背景图像而不切断它?

768702 次浏览
小开
最佳答案

你可以通过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>

There also exists a filter for IE 5.5+ support, as well as vendor prefixes for some older browsers.

小开

你也可以用这个:

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

我不知道你的潜水值，但让我们假设你有这些。

height: auto;
max-width: 600px;

同样，这些只是随机数。 这可能很难使背景图像(如果你想)与固定宽度的div，所以最好使用max-width。实际上，用background-image填充div并不复杂，只需确保父元素的样式正确，这样图像就有了可以放置的地方

克里斯

小开

如果你需要的是图像具有相同的div尺寸，我认为这是最优雅的解决方案:

background-size: 100% 100%;

如果不是，@grc的答案是最合适的。

< p >来源: http://www.w3schools.com/cssref/css3_pr_background-size.asp < / p >
小开

你可以使用这些属性:

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">
小开

试试下面的方法，

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


.container{
background-size: 100%;
}

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

此属性可以使用不同的语法:关键字语法("auto"， "cover"和" include ")，单值语法(设置图像的宽度(height变成"auto")，双值语法(第一个值:图像的宽度，第二个值:高度)。

  • 百分比 -设置背景图像的宽度和高度占父元素的百分比。
  • 封面 -调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或切掉一点边缘
  • 包含 -调整背景图像的大小，以确保图像完全可见

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

小开 
background-position-x: center;
background-position-y: center;
小开

选择:

background-size: auto 100%;
小开

你也可以试试这个，设置背景大小为封面，为了让它看起来更好，还可以设置背景位置中心，如下所示:

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

提交答案