缩放背景图像以适合ie8窗口

Question

我正在使用drupal 7模块加载背景图像，但IE8不支持css3调整大小。

background-image: url('image.jpg');
background-size: cover;

我无法使用常规方法轻松加载图像，例如将其放入DIV或使用ms-filter alphaimageloader加载它。

如果仅使用ie8支持的CSS无法实现javascript解决方案。 （也适用于ie7的东西也很棒，但ie8是优先考虑的事情）。

Answer 1

将全尺寸背景图像添加到Internet Explorer 8和IE7

由于您无法使用常规方法轻松地将背景放置在您的网站中，您是否可以在代码中放置图像？ 如果是这样，此解决方案可能会有效 我用它来模拟IE8和IE7的全屏幕背景，效果很好。

将图像放在html代码中的body标签后面。 （您可以根据您的站点结构将其放置在其他位置，但您可能必须添加z索引。）接下来，此示例中的背景包含在IE条件注释中，因此只有IE8及以下版本才能看到它。 （注意：它在IE6中有问题，但您可能能够使它工作？如果没有，只需调整条件注释以仅包含IE7和IE8）。

HTML代码

<!DOCTYPE html>
<head></head>
<body>
<!--[if lte IE 8]><img src="../path-to-your-image/your-photo.jpg" class="ie87-bg"><![endif]-->

CSS

.ie87-bg {
display:block;
position:fixed;
top:0;
left:0;
min-height:100%;
min-width:1024px;
width:100%;
height:auto;
margin:0;
padding:0;
}

您可能已经知道这一点，但是有三种方法可以定位旧版本的IE：

JavaScript浏览器功能检测 - mattstow.com/layout-engine.html
Css Hacks - BrowserHacks.com
IE Condtional评论http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx

有用的提示： background-image:none; 覆盖background-size: cover 。 _ hack是在IE6中关闭自定义IE背景的一种方法.ie87-bg {_display: none;} 。

position:fixed; 是移动/触摸屏的错误。 默认position:scroll; 触摸效果很好。 背景知识来自本教程 - http://css-tricks.com/perfect-full-page-background-image/

Answer 2

这对我来说可以在IE8中在整个窗口上拉伸图像

http://css-tricks.com/perfect-full-page-background-image/

缩放背景图像以适合ie8窗口

问题描述

2 个解决方案

解决方案1
3 2013-10-17 09:32:07

将全尺寸背景图像添加到Internet Explorer 8和IE7

解决方案2
-1 2013-10-24 07:13:17

缩放背景图像以适合ie8窗口

问题描述

2 个解决方案

解决方案1 3 2013-10-17 09:32:07

将全尺寸背景图像添加到Internet Explorer 8和IE7

解决方案2 -1 2013-10-24 07:13:17

解决方案1
3 2013-10-17 09:32:07

解决方案2
-1 2013-10-24 07:13:17