如何创建类似于 medium.com 的响应式背景图像答案

【问题标题】：How to create responsive background images similar to medium.com如何创建类似于 medium.com 的响应式背景图像
【发布时间】：2014-04-06 08:42:18
【问题描述】：

我正在使用基础框架创建一个 Rails Web 应用程序，但我正在努力寻找一种方法来保持图像纵横比符合我的期望。

在Medium.com 上，他们在主页上使用全宽背景图片，就像我希望的那样。

当将浏览器的大小从非常宽调整为小时，图像最初会在保持纵横比的情况下进行缩放。然后它们似乎达到了最小高度并保持该高度，同时确保图像的宽度不会扭曲。最后，他们使用媒体查询来更改非常小的屏幕的图像。

我正在努力的部分是设置一个固定的高度，但确保它在调整浏览器大小时不会水平扭曲。

如果人们可以提供任何帮助以使 CSS 在以下 HTML 上运行，我们将不胜感激 :)

HTML

<div class="row">
  <div class="large12">
    <img src="assets/bg.jpg">
  </div>
</div>

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

.image-src {
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

您实际上可以通过右键单击使用Chrome DevTools — Google Developers检查所有元素，然后 检查元素

在您的情况下，您必须将图像用作背景而不是 img

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

你想用这个：

<div class="row">
  <div class="large12">
    <!--<img src="assets/bg.jpg">-->
  </div>
</div>

然后设置

.row{
position: absolute;
background: #191918;
top: 0;
left: 0;
right: 0;
height: 447px;
pointer-events: none;
}

和

 .large12{
background: url(images/bg.jpg) no-repeat center center fixed; 
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

阅读和参考请ckecout

1.webplatform.org

2.developer.mozilla.org

3.Codrops - Tympanus

他们都有很好的教程从不使用W3Schools read it here

【讨论】：

【解决方案2】：

他们正在使用background-size:cover...

background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

更多关于background-size的信息在这里...https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

【讨论】：