我有一个背景图像在下面的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,但图像被切断:
<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: cover;
background-position: 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">
试试下面的方法,
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
如果你需要的是图像具有相同的div尺寸,我认为这是最优雅的解决方案:
background-size: 100% 100%;
如果不是,@grc的答案是最合适的。
来源: http://www.w3schools.com/cssref/css3_pr_background-size.asp
选择:
background-size: auto 100%;
background-position-x: center;
background-position-y: center;