我有一个背景图像在下面的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">
有没有办法显示背景图像而不切断它?
当前回答
你也可以用这个:
background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;
我不知道你的潜水值，但让我们假设你有这些。
height: auto;
max-width: 600px;
这些都是随机数。 这可能很难使背景图像(如果你想)与固定宽度的div，所以最好使用max-width。实际上，用background-image填充div并不复杂，只需确保父元素的样式正确，这样图像就有了可以放置的地方。
克里斯
其他回答
选择:
background-size: auto 100%;
试试下面的方法，
background-size: contain;
background-size: cover;
background-size: 100%;
.container{
background-size: 100%;
}
background-size属性指定背景图像的大小。
这个属性可以使用不同的语法:关键字语法("auto"， "cover"和"contain")，单值语法(设置图像的宽度(高度变为"auto")，双值语法(第一个值:图像的宽度，第二个值:高度)。
百分比-设置背景图像的宽度和高度占父元素的百分比。 cover -调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或切掉一点边缘 调整背景图像的大小，以确保图像是完全可见的
更多信息请访问:https://www.w3schools.com/cssref/css3_pr_background-size.asp
您可以使用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")无重复; 宽度:100 px; 身高:200 px; 边框:1px实体; background-size:包含; ｝ < div id = " imagecontainer " > < / div >
还有一个针对IE 5.5+支持的过滤器，以及一些旧浏览器的供应商前缀。
background-position-x: center;
background-position-y: center;
你可以使用这些属性:
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">
