Question

这些图片不会在任何浏览器上调整大小。我做错了什么，如何调整背景图片的大小？

图片标记：

<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相同。

Answer 1

我想我现在理解你的问题......你想要一个固定的容器大小，但有一个背景图像需要100％...这是一个使用3种不同尺寸的相同图片的例子。 / p>

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

<强> DEMO

Answer 2

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

Answer 3

尝试了css background-size: 100%;

使用background-size:cover

时，CSS3会更好

Answer 4

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

图像未在浏览器中调整大小

4 个答案: