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

Question

我正在使用基础框架创建一个rails web应用程序，但我很难找到一种方法来保持图像宽高比，就像我希望的那样。

在Medium.com上，他们按照我希望的方式在主页上使用全宽背景图片。

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

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

人们可以提供任何帮助以使CSS处理以下HTML的任何帮助真的非常感谢：）

HTML

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

Answer 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;
}

详情请阅读css-tricks Perfect Full Page Background Image

您可以通过右键单击并使用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

Answer 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