响应的站点背景图像代码

Question

我有一个循环图像的背景，这些图像没有固定的大小。

我的问题是我无法找到一个简单的响应式框架来重新调整专用背景图像的图像。网站上有很多适用于普通图像的插件。

1. 我的网站背景必须始终显示图像。
2. 允许裁剪，允许图像必须将自己重新定位在网络浏览器的中心。
3. jQuery或@Media是允许的，我真的不介意。

我的图片和div看起来像这样：

<div style="width:100%; height:100%; background:white; position:absolute; margin-left:0px; margin-top:0px;>
    <img src="image1.png">
    <img src="image2.png">
    <img src="image3.png">
</div>

很多插件都将宽度设置为100％，高度设置为自动。这不会像浏览器宽度那样工作，比方说200px和浏览器高度800px。图像不会覆盖整个屏幕并保持其纵横比。图像下方和上方会有“间隙”，因此在这种情况下，高度应为100％，宽度更改为自动。当然，如果浏览器高度为200px且浏览器长度为800px，则相反;

我想要的例子：http://www.martinlogin.se/

Answer 1

您要求根据屏幕方面应用两种不同的方案。这可以通过媒体查询完成，但您需要确定一些宽度和高度。

从基于宽度的大小调整开始：

#backgroundDiv {width: 100%; height: auto;}

当站点比某个点窄时，切换到基于高度的大小调整：

#backgroundDiv {width: auto; height: 100%;}

您需要根据预期受众最有可能的屏幕尺寸/方面情景，您正在使用的图片等来决定转换的位置。

为了获得更大的灵活性，比如特定宽高比而不是宽度，您需要编写脚本。