如何在html / css中更改按钮上图像的大小

Question

我一直试图改变按钮上图像的大小。

可以这样想：我有一个带有图像的按钮，它目前太大了。我已经尝试过这样缩小它：<img src = "Button.jpg" height: "50%"; width: "20%">这不起作用，无论我放入什么样的高度和宽度。

即使将其更改为20px和50px也无能为力。我不想创建一个类，因为我不知道如何导航按钮类，我很确定有一种方法可以像我现在这样做。

此外，它实际上不是一个按钮，它是列表的一部分。 <li><a href="https://www.google.com/" target="_blank">（这也是另一个问题。）

好的按钮的新代码：

    <li><a href="https://www.instagram.com/" target="_blank"><button class = "test"></button></a></li>
  </ul>

对于我的CSS：

.test{
background-image: "instaButton.jpg";
height: 100px;
width: 100px;
}

Answer 1

您需要链接到标头中的css文件。在css文件中，您可以说：.class，然后您可以更改狗屎。所以在html文件中，首先应该在按钮中添加一个类，以便css知道你在说什么。

Answer 2

您的代码应如下所示：

<img src="Button.jpg" height="50%" width="20%"> 

我认为你有一个错误的HTML语法:)

Answer 3

您应该将自定义height和width应用于图像，而不是按钮。

如果您调整按钮的大小，按钮大小将会改变，但图像将超出其边界。如果您使用此选项，您可以将overflow:hidden;设置为button，但您的图像将被裁剪。

如果调整图像大小，图像将调整大小，按钮将分别调整大小到图像。

运行以下代码段作为示例：

button {
    padding: 5px;
    background: #d95753;
    border: 0;
}

.btn-size {
    width: 30px;
    height: 30px;
}

.img-size img {
    width: 30px;
    height: 30px;
}

<h1>
Initial styling:
</h1>
<button>
    <img src="http://via.placeholder.com/350x150" />
</button>

<h1>
If you resize the button:
</h1>
<p>
the button size will change, but the image will go out of its boundaries. If you use this option, you can set overflow:hidden; to the button, but your image will get cropped.
</p>
<button class="btn-size">
    <img src="http://via.placeholder.com/350x150" />
</button>

<h1>
If you resize the image:
</h1>
<p>
the image WILL be resized, and the button will resize respectively to the image.
</p>
<button class="img-size">
    <img src="http://via.placeholder.com/350x150" />
</button>