Css 如何制作没有特定高度的全尺寸背景图像？

体{宽：100%；
身高：100%；
保证金：0；
填充：0；}
#星型箱{宽度：100%；
高度：自动；
溢出：隐藏；
显示：块；
背景图像：url（'https://www.rakuten.ne.jp/gold/sappun/promotion/test.jpg') ;
背景尺寸：封面；
背景重复：无重复；
背景位置：中上；}
.star{颜色：白色；
动画名称：zoomin；
动画持续时间：5s；
文本对齐：居中；
动画迭代计数：无限；}
.star2{颜色：白色；
动画名称：zoomin；
动画持续时间：5s；
文本对齐：居中；
动画迭代次数：无限；
动画延迟：.5s；}
@关键帧缩放{
0%{
变换：缩放（0,0）旋转（0度）；
}
25%{
变换：缩放（4,4）旋转（80度）；
}
50%{
变换：缩放（0,0）旋转（0度）；
}
100%{
变换：缩放（0,0）旋转（0度）；
}
}
#第n个子（1）{左边距：450px；
页边距顶部：150px；}
#第n个子（2）{左边距：400px；
页边距顶部：10px；}
#第n个子（3）{左边距：-450px；
页边距顶部：350px；}
#星形框>第n个子（4）{左边距：-530px；
页边距顶部：30px；}
#第n个子（5）{左边距：280px；
页边距顶部：-200px；}
#空盒{宽度：80%；
高度：1200px；
显示：块；
保证金：0自动；
页边距顶部：-350px；}
#文本{文本对齐：居中；
颜色：白色；
字体大小：50px；
边缘顶部：250px；
不透明度：0；
转换：不透明度.3s线性；}
#空_框：悬停~#文本{不透明度：1；}
和#10022
和#10022
和#10022
和#10022
和#10022
今すぐ見る

使用

高度将与您的容器相对，使用
背景尺寸：封面
将拉伸您的图像以匹配容器，这就是为什么这两种方法都不能保证图像为全屏大小的原因

您可以使用
vh
和
vw
进行此操作，如下所示：


.img{
高度：100vh；
宽度：100vw；
背景尺寸：封面；
背景重复：无重复；
}
使用
高度将与您的容器相对，使用
背景尺寸：封面
将拉伸您的图像以匹配容器，这就是为什么这两种方法都不能保证图像为全屏大小的原因

您可以使用
vh
和
vw
进行此操作，如下所示：


.img{
高度：100vh；
宽度：100vw；
背景尺寸：封面；
背景重复：无重复；
}
更改
背景尺寸：封面星号框
至
背景尺寸：包含

#star_box {
  background-size: contain;
}

更改<代码>背景尺寸：封面星号框
至
背景尺寸：包含

#star_box {
  background-size: contain;
}

“全尺寸”指的是全屏显示，或者由于
背景尺寸：封面
的原因，浏览器正在切割某些部分，而您不希望它这样做。是“背景尺寸：封面”使其看起来像是切割吗？？我不知道；；。。。我想把它做成全尺寸，但如果我设置了一些特定的数字，比如高度：2500px~那么它就不再有响应了，所以（我怎样才能使它全屏显示呢？
背景尺寸：封面
的替代方法是
背景尺寸：包含
Contan将显示整个图像。全屏显示是指全屏显示，或者浏览器由于
背景尺寸：封面
而剪切了某些部分，您不希望这样做。是“背景尺寸：封面”吗使它看起来像切割？？我不知道；；…我想使它完全尺寸，但如果我设置一些特定的数字，如高度：2500px~那么它就不再有响应了，所以（我怎样才能使它全屏显示呢？
background size:cover
的替代方法是
background size:contain
Contan将显示整个图像。你确定吗？
vh
和
vw
单位与父元素无关，使用
%
而使用与视口相关的单位。我认为他想要全屏，所以相对于视口应该是精细的嗨！谢谢你的帮助！：D使用“vh，vw”的方式真的很好谢谢你让我知道这一点！：）但它仍然不是img的完整尺寸，我希望看到整个img的背景，比如我放的时候，你确定吗？
vh
和
vw
单位与父元素无关，使用
%
而使用与视口相关的单位。我想他想要全屏，所以相对于视口应该是好的您好！谢谢您的帮助！：D使用“vh，vw”的方式真的很好，谢谢您让我知道这一点！：）但它仍然不是img的全尺寸，我想看到整个img的背景，就像我放