使用纯 CSS 响应移动视图的背景图像答案

【问题标题】：Background image responsive to mobile view using pure css使用纯 CSS 响应移动视图的背景图像
【发布时间】：2018-12-22 02:21:09
【问题描述】：

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

我用它来将我的背景图片缩放到整个桌面：

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

但我不能得到很好的结果：（这是我搜索中最需要的建议）

@media only screen and (max-width: 600px) {
  html{
    width: 100%;
  }
}

这是桌面背景

虽然这是在我的移动视图中发生的情况

【问题讨论】：

PureCss Responsive Images的可能重复
请向我们提供更多代码和具体问题的上下文。
如何将width 属性附加到我的图像？它只是通过css嵌入
@Barrosy 我希望我桌面上的图片在我的移动视图中完美缩放
你能张贴一张你想要的照片吗？如果不裁剪cover 或缩小宽度以适应contain，您无法使横向照片填充纵向视图...除非您使其不成比例。

标签： html css

【解决方案1】：

喏，

一个优雅的解决方案是更好地控制您想要在横向和纵向模式下显示的内容。根据@salff 评论，如果您想在纵向屏幕上对横向图像做出响应，则必须“丢失一些东西”

我的 sn-p 根据用户屏幕更灵活：

<!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>

注意：代码是通过交叉和调整您的代码生成的，w3schools snippet 和 this answer

希望这会有所帮助，周末愉快，
安东尼诺

【讨论】：

【解决方案2】：

您可以添加如下内容：

.yourelement {
  background-image: url("https://i.stack.imgur.com/viNrB.png");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  height: 247px;
  /*Additional code (don't bother adding this):*/
  text-align: center;
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="yourelement">Your content goes in here</div>
    </div>
  </div>
</div>

JSFiddle

您也可以将contain 替换为cover，但需要添加更多代码。我为此找到了一些东西：

.ratio4-3 {
 width: 100%;
 background-image: url("https://i.stack.imgur.com/viNrB.png");
 background-size: cover;
 height: 0;
 padding: 0; /* reset */
 padding-bottom: calc(100% * 3 / 4);
}

.text-center {
  text-align: center;
  color: white;
}

<div class="ratio4-3">
  <div class="text-center">
    content could go in here
  </div>
</div>

JSFiddle

【讨论】：