Question

我该如何做类似的响应式图像？就像在这个页面上一样。

我试图用css做这个，但没有效果。

感谢。

Answer 1

使用background-size:cover属性

html, body{
  height:100%;
}
.responsive_bg{
  background:url("http://upload.wikimedia.org/wikipedia/commons/5/51/ShiFengWaterFall_002.jpg") no-repeat;
  background-size:cover;
  width:100%;
  height:100%
}

<强> DEMO

Answer 2

此图像设置为背景图像。您是否有任何代码可以与我们分享，以便我们提供帮助？

基本上，不是写通常的图像：

<img src="this/cool/image.png" />

根据您想要查看的响应行为，您将使用您根据自己调整大小的常规div：

<div style="background-image: url(this/cool/image.png)"></div>

和自定义图像（背景）本身的CSS：

div{
    background-size:cover; // fills the div
    background-position; 50% 50%; //centers the background
    //add here some way to get your div to be the proper size for responsiveness
}

当然，您使用媒体查询为整个shenanigan添加更多响应。

适合div的响应式图像

2 个答案: