我正在使用Chrome并且代码工作正常,但是,当我将其加载到Internet Explorer时,它会显示图像的实际大小,而不是缩放以适应屏幕。我希望图像位于页面的左侧,从上到下覆盖,但不是从左到右。我希望它保持不变,以便图像正确缩放。这就是我所拥有的。有更简单的方法吗?我正在使用Internet Explorer 8。 ETA:图像为340x554px
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:#000000;
}
#logo{
top:0;
bottom:0;
left:0;
position:absolute;
background-image:url('logo.jpg');
background-size: contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-repeat:no-repeat;
height:100%;
width:100%;
}
</style>
<title>Title</title>
</head>
<body>
<div id="logo">
</div>
</body>
</html>
答案 0 :(得分:2)
如果您没有使用精灵,并且容器内没有应用背景的链接,则可以对IE8使用此修复程序:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/image.jpg',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/image.jpg',
sizingMethod='scale')";