我试图将图像大小设置为按钮的大小

Question

我正在尝试根据按钮的大小设置图像的大小。请参阅我在html中的以下代码：

<button id="image" type="button" title="Image">
    <img src = "nature.jpg" width="20" height="20" />
</button>

但我没有得到它。 你能帮帮我吗？ 提前谢谢。

Answer 1

您只需删除按钮填充和边框即可使图像完全填充。

#image {
    border: 0;
    padding: 0;
}

演示：http://jsfiddle.net/nfpNL/1/

您还可以将图片设置为背景：

#image {
    background: url(http://lorempixel.com/100/100/nature/1) no-repeat 0 0;
    height: 20px;
    width: 20px;
    border: 0;
    padding: 0;
}

然后您根本不需要img标记

演示：http://jsfiddle.net/nfpNL/

Answer 2

您可以使用

将img的样式设置为从父级继承

 <img src = "nature.jpg" style="width:inherit;height:inherit" />

Answer 3

你最好帮助css做这件事。

#image{
background-image: url(nature.jpg);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;
}

使用内置img的按钮通常会更容易一些：

<button id="image" type="button" title="Image">
</button>