如何在HTML和CSS样式中拉伸背景图像？
[英]How to stretch background-image in html and css styling?
问题描述
I am new to html and css and is trying to create a personal website for learning purposes. 
我是html和css的新手，正在尝试创建一个个人网站以供学习。
I am having difficulties with the background image not stretching to fit the screen. 我遇到背景图像无法拉伸以适合屏幕的问题。 Providing the code in the following. 在下面提供代码。
body{
background-image: url(backgroundimage.jpg);
/*background-color: #95afc0;*/
background-size: cover;
}
The image works fine when the window is in full screen. 当窗口全屏显示时，图像工作正常。 I would like to see if there is any way for me to prevent it from duplicating the images to fit the screen and just crop or stretch to fit. 我想看看是否有什么办法可以防止它复制图像以适合屏幕，而只是裁剪或拉伸以适合屏幕。 As this would be an issue on mobile device. 因为这将是移动设备上的问题。 I've tried the other properties of background-size. 我尝试了background-size的其他属性。
Thank you in advance! 先感谢您！
6 个解决方案
解决方案1
1 2018-09-10 07:51:33
CSS The object-fit Property CSS对象适合属性
Try the following and see what best suits your needs... 尝试以下方法，看看最适合您的需求...
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
All Values of The CSS object-fit Property The object-fit property can have the following values:
- fill - This is default.
- contain - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box
- cover - The replaced content is sized to maintain its aspect ratio while filling the element's entire content box.
- none - The replaced content is not resized
- scale-down - The content is sized as if none or contain were specified (would result in a smaller concrete object size)
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>
解决方案2
0 2018-09-10 07:45:11
Try not to put the background on your <body> , but create a <div id="background"></div> with #background {position: fixed; z-index: 1; background-image: url(backgroundimage.jpg); background-repeat: no-repeat; height: 100vh; width: 100vw;} 尽量不要将背景放在您的<body> ，而是使用#background {position: fixed; z-index: 1; background-image: url(backgroundimage.jpg); background-repeat: no-repeat; height: 100vh; width: 100vw;}创建一个<div id="background"></div> #background {position: fixed; z-index: 1; background-image: url(backgroundimage.jpg); background-repeat: no-repeat; height: 100vh; width: 100vw;} #background {position: fixed; z-index: 1; background-image: url(backgroundimage.jpg); background-repeat: no-repeat; height: 100vh; width: 100vw;} (don't forget to apply a z-index > 1 on your first content layer to make your background a background). #background {position: fixed; z-index: 1; background-image: url(backgroundimage.jpg); background-repeat: no-repeat; height: 100vh; width: 100vw;} （不要忘记在第一个内容层上应用z-index> 1来使背景成为背景）。
解决方案3
0 2018-09-10 07:51:43
background-position: center;
background-size: contain;
background-repeat: no-repeat;
you need to add image background position to center and set repeat to no-repeat. 您需要将图像背景位置添加到中心并将重复设置为无重复。
解决方案4
0 2018-09-10 07:53:19
You can try this code 您可以尝试此代码
body{
background-image: url(backgroundimage.jpg);
/*background-color: #95afc0;*/
background-repeat:no-repeat;
background-size: cover;
}
Cover: Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges 封面：调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或从边缘之一上切掉一点点
解决方案5
0 2018-09-10 09:01:41
To prevent duplication of background image, you need to add following css property and value: 为防止背景图像重复，您需要添加以下css属性和值：
background-repeat: no-repeat;
For more about background property follow this link: https://css-tricks.com/almanac/properties/b/background/ 有关背景属性的更多信息，请访问此链接： https : //css-tricks.com/almanac/properties/b/background/
解决方案6
-1 2018-09-10 07:49:19
You need to add background-position: center ( that refers to both axes X and Y ); 您需要添加background-position：center（指向X和Y轴）； background-repeat: no-repeat; 背景重复：不重复；
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.