Html 使用纯css响应移动视图的背景图像_Html_Css

Html 使用纯css响应移动视图的背景图像

html css

Html 使用纯css响应移动视图的背景图像,html,css,Html,Css,我希望我的背景图像在移动视图中具有响应性我用它将背景图像缩放到整个桌面： html { background:url("image/2.jpg") no-repeat center center fixed; background-size: cover; } 但我不能在这方面有一个很好的结果：（这是我搜索中最需要的建议）这是一个桌面背景虽然这是在我的移动视图中发生的情况，但您可以添加如下内容： .yourelement{ 背景图像：url（“https://i.st

我希望我的背景图像在移动视图中具有响应性

我用它将背景图像缩放到整个桌面：

 html  {
   background:url("image/2.jpg") no-repeat center center fixed;
   background-size: cover;
 }

但我不能在这方面有一个很好的结果：（这是我搜索中最需要的建议）

这是一个桌面背景

虽然这是在我的移动视图中发生的情况，但您可以添加如下内容：

.yourelement{
背景图像：url（“https://i.stack.imgur.com/viNrB.png");
背景重复：无重复；
背景尺寸：包含；
背景位置：中心；
高度：247px；
/*附加代码（不必添加此代码）：*/
文本对齐：居中；
颜色：白色；
}


你的内容放在这里

再见

一个优雅的解决方案是更好地控制您想要在横向和纵向模式下显示的内容。根据@salff comment的说法，如果你想在人像屏幕上对风景图像做出反应，你必须“失去一些东西”

我的代码片段根据用户屏幕更灵活：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>


html
{
    background:url("https://www.hotelmedici.com/images/slide_home/11_Fori_imperiali_1600X917.jpg") no-repeat center center fixed;
    background-size: cover;
    width: 100%;
}

#warning-message { display: none; }

@media only screen and (orientation:portrait)
{
    #wrapper { display:none; }
    #warning-message { display:block; color: white;}

    html
    {
        background:url("https://s3files.core77.com/blog/images/2013/11/ESB-HalloweenLightShow-1.jpg") no-repeat center center fixed;
        background-size: cover;
        height: 100%;
    }       
}


</style>
</head>
<body>

<div id="wrapper">
    <h2>Responsive Images</h2>
    <p>If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto.</p>
    <p>Resize the browser window to see the effect.</p>
</div>

<div id="warning-message">
    this website is only viewable in landscape mode
</div>

</body>
</html>


html
{
背景：url（“https://www.hotelmedici.com/images/slide_home/11_Fori_imperiali_1600X917.jpg）没有固定的重复中心；
背景尺寸：封面；
宽度：100%；
}
#警告消息{显示：无；}
@仅媒体屏幕和（方向：纵向）
{
#包装{显示：无；}
#警告消息{显示：块；颜色：白色；}
html
{
背景：url（“https://s3files.core77.com/blog/images/2013/11/ESB-HalloweenLightShow-1.jpg）没有固定的重复中心；
背景尺寸：封面；
身高：100%；
}       
}
响应图片
如果希望图像在响应上同时上下缩放，请将CSS宽度属性设置为100%，高度设置为自动
调整浏览器窗口的大小以查看效果
此网站只能在横向模式下查看

注意：代码是通过交叉和调整代码生成的，并且

希望这有帮助，享受周末，

Antonino

可能重复的请向我们提供您的特定问题的更多代码和上下文。我如何将

width

属性附加到我的图像中？它只是嵌入到css@Barrosy我希望我的dekstop中的图片能够在我的手机视图中完美缩放。你能发布一张你希望它看起来像什么的图片吗？如果不裁剪横向照片

封面

或缩小宽度以适应

包含

，则无法使横向照片填充纵向视图，除非使其不成比例。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>


html
{
    background:url("https://www.hotelmedici.com/images/slide_home/11_Fori_imperiali_1600X917.jpg") no-repeat center center fixed;
    background-size: cover;
    width: 100%;
}

#warning-message { display: none; }

@media only screen and (orientation:portrait)
{
    #wrapper { display:none; }
    #warning-message { display:block; color: white;}

    html
    {
        background:url("https://s3files.core77.com/blog/images/2013/11/ESB-HalloweenLightShow-1.jpg") no-repeat center center fixed;
        background-size: cover;
        height: 100%;
    }       
}


</style>
</head>
<body>

<div id="wrapper">
    <h2>Responsive Images</h2>
    <p>If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto.</p>
    <p>Resize the browser window to see the effect.</p>
</div>

<div id="warning-message">
    this website is only viewable in landscape mode
</div>

</body>
</html>