Question

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

这样想：我有一个带有图像的按钮，它目前太大了。我试过按比例缩小它： <img src = "Button.jpg" height: "50%"; width: "20%">，无论我的身高和宽度如何，这都不起作用。

即使将其更改为20px和50p x也无法执行任何操作。我＆＃d; 指的是不必创建课程，因为我不知道如何导航按钮课程，我非常确定这样做只是为了做到这一点就像我现在这样做。

此外，它实际上不是一个按钮，它是列表的一部分。 <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，但您的图片会被裁剪。

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

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

＆＃13;

button {
    padding: 5px;
    background: #d95753;
    border: 0;
}

.btn-size {
    width: 30px;
    height: 30px;
}

.img-size img {
    width: 30px;
    height: 30px;
}

＆＃13;

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

＆＃13;

如何在html / css

3 个答案: