0

troop981.comをご覧ください：

eagle.gifと編集可能なテキストを含むMountains.jpgは、さまざまなサイズのモニターで表示したり、ズームインしたりすると、ページの端にぶら下がっているように見えます。

Mountains.jpgを作成したいのですが、jpgの上のテキストは、ユーザーの表示に比例して幅と高さのサイズを変更します。

以下のコードはページのHTMLです。HTMLやCSSについては何も知らず、サイトを構築した人はもう私たちと一緒にいないので、助けていただければ幸いです。

<style>
    .background_image
    {
    background:url(http://www.troop981.com/default/portals/0/Tatra_Mountains_Panorama_01.jpg);      /* image to display */
    width:1602px;                     /* width of image */
    height:332px;                    /* height of image */
    overflow:hidden;                 /* so div won't change size */
    }
    .eagle_image
    {
    height: 222px; /* use the actual height of the eagle gif */
    width: 250px; /* use the actual width of the eagle gif */
    background:url(http://www.troop981.com/default/portals/0/0049.gif) no-repeat; /* use your eagle filename */
    position: absolute; top: 50px;    /* adjust these to see the eagle move to where you want */
    left: 40px;                               /* ditto from above */
    }
    .text_properties
    {
    padding-left:2px;                /* position of text in inner div */
    padding-top:2px;                 /* position of text in inner div */
    padding-right:2px;               /* position of text in inner div */
    padding-bottom:2px;              /* position of text in inner div */
    color:darkgreen;                   /* text color */
    font-size:40px;                  /* font size */
    font-weight:bold;                /* font weight */
    font-family:script;               /* font family */
    margin-left:400px;                 /* left position of text */
    margin-top:50px;                 /* top position of text */
    }
</style>
<div class="background_image">
<div class="eagle_image"></div>
<div class="text_properties">Congratulations to Patrick Guilfoy &ndash; Troop 981&rsquo;s 104th Eagle Scout</div>
</div>
4

1 に答える 1

0

なぜ背景画像を縮小したいのですか？それを縮小するのではなく、ページを小さいサイズで表示するときにテキストをスケーラブルにする方がよいと思います。

次のように.background_imageを変更してみてください。

.background_image
    {
    background:url(http://www.troop981.com/default/portals/0/Tatra_Mountains_Panorama_01.jpg);      /* image to display */
    width:100%;                     /* width of image */
    height:332px;                    /* height of image */
    overflow:hidden;                 /* so div won't change size */
    }

このようにすると、背景画像の幅（高さではなく）が縮小され、tekstが画面のサイズに合わせて調整されます。

于 2013-02-21T14:42:25.450 に答える