如何创建类似于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 Developersri实际检查所有的材料GHT点击和 检查元素

你的情况

，你必须使用图像作为背景而不是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

webplatform.org 1.

developer.mozilla.org 2.

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