响应式网站背景图像代码

我有一个背景图像循环，这些图像没有固定的大小。响应式网站背景图像代码

我的问题是，我无法找到一个简单的响应帧重新调整图像，这是专门背景图像。在网站上有很多正常图片的插件。

我的网站的背景总是要显示图像。
允许裁剪，图像必须在Web浏览器中心重新定位。
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/

来源

2013-03-03 Karl Morrison

如果你的HTML看起来像这样，难怪它不起作用。 ;-)也许把你的（修复过的）HTML放在小提琴里。 http://jsfiddle.net/ – isherwood 2013-03-03 19:09:04

我错过了“<”的目的，否则它们将不会显示在这里：/一切正在我的网站上工作，只是当我调整浏览器高度为800px和宽度到200px的图像“缩小”到一个非常小的尺寸，我想高度是100％和宽度自动（裁剪大部分图像） – 2013-03-03 19:11:20

您不必破坏代码来显示它在你的问题。正确格式化并使用工具栏中的代码按钮。 – isherwood 2013-03-03 19:13:39

你问了两个不同的场景根据屏幕方面应用。这可以通过媒体查询来完成，但是您需要确定一些宽度和高度。

开始使用基于宽度尺寸：

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

当站点比一些点窄，切换到基于高度的大小：

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

你需要决定的过渡根据您的预期受众最可能的屏幕尺寸/方面情况，您正在使用的图像等进行。

为了更具灵活性，针对特定方面比率而不是宽度，你需要脚本。

来源

2013-03-03 19:23:10 isherwood

这正是我最近2小时玩过的东西:(图片的宽度和高度不一样，所以如果我确实应用了某个宽度或高度，背景会“跳跃”，有点让它变丑。像这样; if（img.width 2013-03-03 19:32:13

所以给它如果遇到问题，可以使用jQuery并提出问题。SO不是免费的自由职业者网站;-) – isherwood 2013-03-03 19:33:16

充分意识到！我很挑剔，喜欢轻量级的代码！在这个太久的时间里，我的大脑正在发烫，哈哈！ – 2013-03-03 19:36:43

响应式网站背景图像代码

回答

相关问题