我有一个网站(g-floors.eu)，我想使背景(在css中，我已经为内容定义了bg-image)也响应。不幸的是，我真的不知道如何做到这一点，除了我能想到的一件事，但这是一个相当好的变通办法。创建多个图像，然后使用css屏幕大小来改变图像，但我想知道是否有更实用的方法来实现这一点。
基本上我想要实现的是图像(水印'G')自动调整大小，而不显示更少的图像。当然，如果可能的话
链接:g-floors.eu
到目前为止的代码(内容部分)
#content {
background-image: url('../images/bg.png');
background-repeat: no-repeat;
position: relative;
width: 85%;
height: 610px;
margin-left: auto;
margin-right: auto;
}
当前回答
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#res_img {
background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
width: 100%;
height: 500px;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
border: 1px solid red;
}
@media screen and (min-width:300px) and (max-width:500px) {
#res_img {
width: 100%;
height: 200px;
}
}
</style>
<div id="res_img">
</div>
其他回答
这个很简单=)
body {
background-image: url(http://domains.com/photo.jpeg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
看一下jsFiddle演示
这里是sass mixin响应背景图像，我使用。它适用于任何块元素。当然，同样可以在纯CSS中工作，你只需要手动计算填充。
@mixin responsive-bg-image($image-width, $image-height) {
background-size: 100%;
height: 0;
padding-bottom: percentage($image-height / $image-width);
display: block;
}
.my-element {
background: url("images/my-image.png") no-repeat;
// substitute for your image dimensions
@include responsive-bg-image(204, 81);
}
比如http://jsfiddle.net/XbEdW/1/
通过这段代码，你的背景图像到中心，并固定它的大小，无论你的div大小改变，适合小，大，正常大小，最好的，我用它在我的项目中，我的背景大小或div大小可以改变
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
尝试使用background-size，但使用两个参数，一个用于宽度，另一个用于高度
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width
// and the second will be the height.
background-position:center;
我认为，最好的办法是:
body {
font-family: Arial,Verdana,sans-serif;
background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}
这样就不需要再做什么了，而且很简单。
至少，它对我有用。
我希望这能有所帮助。
