-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;
}

3 幅图像的 CSS 相同。

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

然后您的另一个选择是将您的图像放入照片处理程序并默认将图像设为您指定的大小。
作为一般经验法则，HTML 和 CSS 一开始就不能很好地处理图像，它们可以进行一些操作，但不能保证结果会是什么样子。
（例如，如果您想让图像更小，浏览器可以将整个图像剪切到指定的大小，或者缩小图像）

于 2013-09-16T15:42:26.580 回答
0

使用百分比宽度而不是固定宽度。

于 2013-09-16T15:29:45.030 回答
0

试过cssbackground-size: 100%;

CSS3 更好用 background-size:cover

于 2013-09-16T15:31:31.847 回答