使背景图像适合div

HTML CSS

樱

2020-03-23

我在以下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">

有没有一种方法可以显示背景图像而不将其剪切掉？

第2798篇《使背景图像适合div》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
小宇宙 2020.03.23

您可以使用以下属性：

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">
TomStafan 2020.03.23

您可以使用background-size属性来实现此目的，大多数浏览器现在都支持该属性。

缩放背景图像以适合div：

background-size: contain;

要缩放背景图像以覆盖整个div：

background-size: cover;

JSFiddle示例

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

乐 2020.03.23

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

background-size: 100% 100%;

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

资料来源：http： //www.w3schools.com/cssref/css3_pr_background-size.asp

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android