2

私はこれをIE9で動作させていましたが、IE8と7でそれを理解しようとして混乱しました。私はここや他の場所を検索しましたが、私の問題の正しい解決策を見つけることができません。

ブラウザウィンドウのサイズが最大幅（流体画像）よりも小さい場合は常に、div内の画像を縮小しようとしています。問題は、古いブラウザではサポートされていないCSS3プロパティ（background-size：100％;）を使用していることだと思います。これをIE9、8、7と互換性を持たせるにはどうすればよいですか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fluid Image</title>
<style type="text/css">

img {
    max-width: 90%;
    height: auto;
}

.imageContainer {
    width: 900px;
    max-width: 90%;
    margin: 0 auto;
    background-image: url(img/fluidImage.jpg);
    background-position: 0 -450px;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 650px;
}

</style>

</head>
<body>
<div class="imageContainer"></div>
</body>
</html>
4

1 に答える 1

0

これに使用できるフィルターがあります。

http://www.pziecina.com/design/turorial_demos/resize_background.php

IE8より前の使用-

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='linkToImage.jpg',sizingMethod='scale');

IE8を使用する場合：

-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='linkToImage.jpg',sizingMethod='scale')";

sizingMethod ='scale'を使用すると、IEでも背景画像をブラウザウィンドウのサイズに拡大縮小できます。

于 2012-09-11T20:20:24.713 に答える