-3

これらの画像は、どのブラウザーでもサイズ変更されません。背景画像のサイズを変更するにはどうすればよいですか?

画像タグ:

<table class="center">
    <tr>
        <td>
            <a href="TMR Library.html"><div id="Library"></div></a><img src="DividerTransparent.png" id="Divider">
        </td>
        <td>
            <a href="TMR Contact.html"><div id="Contact"></div></a><img src="DividerTransparent.png" id="Divider">
        </td>
        <td>
            <a href="TMR About.html"><div id="About"></div></a>
        </td>
    </tr>
</table>

CSS:

#Library {

background-image: url('LibraryTransparent.png');
height: 70px;
width: 120px;
border-style: none;
}

#Library:hover {

background-image: url('LibraryHoverTrans.png');
height: 70px;
width: 120px;
}

CSS は 3 つの画像で同じです。

4

4 に答える 4

1

私は今あなたの質問を理解していると思います...あなたはある種の固定コンテナサイズを望んでいますが、それの100％を占める背景画像を持っています...これは3つの異なるサイズで同じ画像を使用する例です.

HTML

<div id="foo"></div>
<div id="bar"></div>
<div id="baz"></div>

CSS

#foo {
    width: 150px;
    height: 150px;
    background-size: 100%;
    background-image: url(http://placekitten.com/300/300);
}

#bar {
    width: 100px;
    height: 100px;
    background-size: 100%;
    background-image: url(http://placekitten.com/300/300);
}

#baz {
    width: 500px;
    height: 500px;
    background-size: 100%;
    background-image:  url(http://placekitten.com/300/300);
}

デモ

于 2013-09-16T15:49:27.230 に答える
0

固定幅の代わりにパーセント幅を使用します。

于 2013-09-16T15:29:45.030 に答える
0

cssを試してみたbackground-size: 100%;

CSS3の方が優れています background-size:cover

于 2013-09-16T15:31:31.847 に答える
0

次に、他のオプションは、画像を写真操作プログラムに入れ、デフォルトで画像を指定したサイズにすることです。
一般的な経験則として、HTML と CSS は最初から画像をうまく操作できません。多少の操作はできますが、結果がどのようになるかは保証できません。
(例として、画像を小さくしたい場合、ブラウザは画像全体を指定されたサイズに縮小するか、画像を縮小することができます)

于 2013-09-16T15:42:26.580 に答える