如何在 html 和 css 样式中拉伸背景图像？答案

【问题标题】：How to stretch background-image in html and css styling?如何在 html 和 css 样式中拉伸背景图像？
【发布时间】：2019-02-14 14:36:54
【问题描述】：

我是 html 和 css 的新手，正在尝试创建一个个人网站以用于学习目的。

我在背景图像无法拉伸以适应屏幕时遇到问题。在下面提供代码。

body{
    background-image: url(backgroundimage.jpg);
    /*background-color: #95afc0;*/
    background-size: cover;

}

当窗口全屏时，图像可以正常工作。我想看看是否有任何方法可以防止它复制图像以适应屏幕并且只是裁剪或拉伸以适应。因为这将是移动设备上的问题。我已经尝试过 background-size 的其他属性。

提前谢谢你！

【问题讨论】：

试试background-size:100% 100%
你能分享更多代码吗？
如果有任何答案回答了这个问题，请不要忘记将此问题标记为已回答。另外，请对您认为有帮助的任何问题进行投票。谢谢:)

标签： html css web background-image background-size

【解决方案1】：

尽量不要把背景放在你的<body> 上，而是用#background {position: fixed; z-index: 1; background-image: url(backgroundimage.jpg); background-repeat: no-repeat; height: 100vh; width: 100vw;} 创建一个<div id="background"></div>（不要忘记在你的第一个内容层上应用 z-index > 1 以使你的背景成为背景） .

【讨论】：

【解决方案2】：

您需要添加 background-position: center （指的是 X 轴和 Y 轴）；背景重复：不重复；

【讨论】：

【解决方案3】：

CSS 对象适配Property

尝试以下方法，看看最适合您的需求...

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

CSS object-fit 属性的所有值 object-fit 属性可以具有以下值：

填充 - 这是默认设置。被替换的内容的大小可以填满元素的内容框。如有必要，对象将被拉伸或压扁以适应

包含 - 被替换的内容被缩放以保持其纵横比，同时适合元素的内容框

cover - 被替换的内容在填充元素的整个内容框时调整大小以保持其纵横比。对象将是剪裁以适合

none - 被替换的内容未调整大小

按比例缩小 - 内容的大小就像没有指定或包含指定一样（将导致更小的具体对象大小）

H2 {
font-size:200%; color:#6a78c2; text-align:center; font-family: fantasy; 
}

.myimgs {
border:1px solid #333; background:#ff0653; padding:10px; margin-bottom:20px;
}

.myimg {
width:100%; background-position:center; background-repeat: no-repeat;
}

.fill {object-fit: fill;}
.cover {object-fit: cover;}
.contain {object-fit: contain;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

<H2>FILL</H2>

<div class="myimgs">
<img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg fill" width="1049px" height="693px">
</div>

<H2>COVER</H2>

<div class="myimgs">
<img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg cover" width="1049px" height="693px">
</div>

<H2>CONTAIN</H2>

<div class="myimgs">
<img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg contain" width="1049px" height="693px">
</div>

<H2>SCALE-DOWN</H2>

<div class="myimgs">
<img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg scale-down" width="1049px" height="693px">
</div>

<H2>NONE</H2>

<div class="myimgs">
<img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg none" width="1049px" height="693px">
</div>

【讨论】：

【解决方案4】：

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

您需要将图像背景位置添加到中心并将重复设置为不重复。

【讨论】：

【解决方案5】：

你可以试试这个代码

body{
    background-image: url(backgroundimage.jpg);
    /*background-color: #95afc0;*/
    background-repeat:no-repeat;
    background-size: cover;
}

覆盖：调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或从边缘剪掉一点

【讨论】：

【解决方案6】：

为防止背景图片重复，需要添加以下css属性和值：

background-repeat: no-repeat;

有关背景属性的更多信息，请点击此链接：https://css-tricks.com/almanac/properties/b/background/

【讨论】：