Html 仅在移动设备上加载背景图像

我试图找到一个关于div的解决方案。我希望文本位于背景图像的中间。在我的代码中，文本和背景故意只显示一个小屏幕。我尝试了文本居中对齐和垂直对齐：中间对齐，但没有达到预期效果。有人知道如何管理代码吗

#你的形象{
背景图像：无；
}
#yourimage p{
显示：无；
}
@介质（最大宽度：500px）{
#你的形象{
背景图像：url（'http://placehold.it/350x150/f22/fff');
背景尺寸：封面；
背景图像：块；
}
#yourimage p{
显示：块；
垂直对齐：中间对齐；
}
}

调整浏览器窗口的大小以查看图像

您还需要为div指定一个固定的宽度和高度。这段代码应该可以做到这一点。在中心对齐项目的一个好方法是使用CSS Flex

此外，没有

背景图像：块CSS属性


#你的形象{
显示：无；
}
@介质（最小宽度：100px）{
#你的形象{
宽度：350px；
高度：150像素；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
背景：url（'http://placehold.it/350x150/f22/fff');
背景尺寸：封面；
}
}


调整浏览器窗口的大小以查看图像

您也必须使用webkit。浏览器兼容性。
请找到下面的解决方案


#你的形象{
显示：无；
}
@介质（最小宽度：100px）{
#你的形象{
宽度：350px；
高度：150像素；
显示器：flex；
显示：-webkit flex；/*Safari*/
对齐项目：居中；
-webkit对齐项目：居中；/*Safari 7.0+*/
证明内容：中心；
-webkit内容：中心；
背景：url（'http://placehold.it/350x150/f22/fff');
背景尺寸：封面；
}
}


调整浏览器窗口的大小以查看图像

您可以执行以下操作：


*{框大小：边框框}
正文{页边距：0}
#yourimage>p{
显示：无；
}
@介质（最大宽度：500px）{
#你的形象{
显示器：flex；
对齐内容：居中；/*水平居中弹性项（子项）*/
对齐项目：居中；/*并垂直对齐*/
背景：url（'http://placehold.it/350x150/f22/fff“）无重复中心；
背景尺寸：封面；
宽度：350px；
最大宽度：100%；/*响应性*/
高度：150像素；
页边距：0自动；/*在页面上水平居中*/
}
#yourimage>p{
显示：块；
}
}

调整浏览器窗口的大小以查看图像

因为您使用的是
@media
@MrLister，所以您是对的。如果我想让我的图片全屏显示，我是否需要设置固定的宽度和高度？