缩放背景图像以适合ie8窗口
[英]Scale background image to fit ie8 window
问题描述
I'm using a drupal 7 module to load in a background image but IE8 doesn't support css3 resizing. 
我正在使用drupal 7模块加载背景图像，但IE8不支持css3调整大小。
background-image: url('image.jpg');
background-size: cover;
I can't easily load in the image using the usual methods such as putting it in a DIV or using the ms-filter alphaimageloader to load it. 我无法使用常规方法轻松加载图像，例如将其放入DIV或使用ms-filter alphaimageloader加载它。
A javascript solution is fine if this can't be done with just CSS that ie8 supports. 如果仅使用ie8支持的CSS无法实现javascript解决方案。 (Something that also works for ie7 would be fantastic too, but ie8 is the priority). （也适用于ie7的东西也很棒，但ie8是优先考虑的事情）。
2 个解决方案
解决方案1
3 2013-10-17 09:32:07
Add Full Size Background Image to Internet Explorer 8, and IE7 将全尺寸背景图像添加到Internet Explorer 8和IE7
Since you can't easily place the background in your site using the usual methods, can you place an image within your code? 由于您无法使用常规方法轻松地将背景放置在您的网站中，您是否可以在代码中放置图像？ If so, this solution might work. 如果是这样，此解决方案可能会有效 I used it to simulate a full-screen background for IE8 and IE7, and it works well. 我用它来模拟IE8和IE7的全屏幕背景，效果很好。
Place the image right after the body tag in the html code. 将图像放在html代码中的body标签后面。 (You can probably place it elsewhere depending on your site structure, but you may have to add a z-index.) Next, the background in this example is wrapped in an IE Conditional Comment so only IE8 and below will see it. （您可以根据您的站点结构将其放置在其他位置，但您可能必须添加z索引。）接下来，此示例中的背景包含在IE条件注释中，因此只有IE8及以下版本才能看到它。 (Note: It's buggy in IE6, but you might be able to get it to work? If not, just adjust the Conditional Comment to include IE7 and IE8 only). （注意：它在IE6中有问题，但您可能能够使它工作？如果没有，只需调整条件注释以仅包含IE7和IE8）。
HTML Code HTML代码
<!DOCTYPE html>
<head></head>
<body>
<!--[if lte IE 8]><img src="../path-to-your-image/your-photo.jpg" class="ie87-bg"><![endif]-->
CSS 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;
}
You probably already know this, but here are 3 ways to target older versions of IE: 您可能已经知道这一点，但是有三种方法可以定位旧版本的IE：
- JavaScript browser feature detection - mattstow.com/layout-engine.html JavaScript浏览器功能检测 - mattstow.com/layout-engine.html
- Css Hacks - BrowserHacks.com Css Hacks - BrowserHacks.com
- IE Condtional Comments http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx IE Condtional评论http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx
Helpful Tips: background-image:none; 有用的提示： background-image:none; overwrites background-size: cover . 覆盖background-size: cover 。 The _ hack is one way to turn off the custom IE background in IE6 .ie87-bg {_display: none;} . _ hack是在IE6中关闭自定义IE背景的一种方法.ie87-bg {_display: none;} 。
position:fixed; is buggy in mobile/touch screens. 是移动/触摸屏的错误。 The default position:scroll; 默认position:scroll; works well on touch. 触摸效果很好。 The background idea is from this tutorial - http://css-tricks.com/perfect-full-page-background-image/ 背景知识来自本教程 - http://css-tricks.com/perfect-full-page-background-image/
解决方案2
-1 2013-10-24 07:13:17
This works for me to stretch image on full window in IE8 这对我来说可以在IE8中在整个窗口上拉伸图像
http://css-tricks.com/perfect-full-page-background-image/ http://css-tricks.com/perfect-full-page-background-image/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.