1

それで、私が取り組んでいる新しいアプリ会社のウェブサイトを設定することができました。大きな画像を使用しているのは、すばやく設定するのが簡単だからですが、ブラウザのサイズが調整されるとつぶれてしまいます。画像が拡大縮小されるようにする方法はありますか？これが私のindex.htmlファイルのコードです。助けてくれてありがとう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>WeShould Inc</title>
<style type="text/css">

<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>

<body>
    <div id="page-background"><img src="http://i.imgur.com/DJaWd.jpg" width="100%" height="100%" alt="Fireworks"></div>
    <div id="content">

    </div> */


</body>
</html>
4

1 に答える 1

3

これを試して：

<style type="text/css">
html { 
    background: url(http://i.imgur.com/DJaWd.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i.imgur.com/DJaWd.jpg', sizingMethod='scale')";
</style>

これは、IE を含むすべてのブラウザーで機能するはずです。

使用例 - http://fiddle.jshell.net/FENXB/1/show/

于 2012-06-30T18:30:57.257 に答える