Html输入类型图像：don'；t拉伸图像

我有一个图像类型的输入。有没有一种方法可以让输入覆盖父div的整个大小而不拉伸图像？这里是一个48x48图像的示例。结果是一个300x300的图像，但我希望图像保持原来的大小，而背景色应该覆盖整个div

---

尝试将其用作背景图像，这样您就可以根据需要制作图像，并且输入将是全高全宽。检查代码段

输入{
宽度：100%；
高度：300px；
填充：0px！重要；
背景图像：url（“https://www.w3schools.com/tags/img_submit.gif");
背景重复：无重复；
}

图像原本很小，因此拉伸时无论如何都会被破坏。我认为您可以使用svg来代替

您可以通过将输入标记的宽度从100%更改为10%来实现

<div style="width: 300px; height: 300px">
  <input type="image" src="https://www.w3schools.com/tags/img_submit.gif" style="background-color: #f0f0f0;border: solid 1px #a8a8a8;padding:1px 6px;cursor:pointer;width: 10%;">
</div>

或者删除宽度、Div的高度和输入标记的宽度

<div>
  <input type="image" src="https://www.w3schools.com/tags/img_submit.gif" style="background-color: #f0f0f0;border: solid 1px #a8a8a8;padding:1px 6px;cursor:pointer;">
</div>

或者加上这个

<input type="image" src="https://www.w3schools.com/tags/img_submit.gif" style="background-color: #f0f0f0;border: solid 1px #a8a8a8;padding:1px 6px;cursor:pointer;">

---

如果要保持图像的原始大小，且背景色应覆盖整个div，则无法使用输入类型图像，但您可以尝试以下方法：

---

首先设置父div的宽度和高度，然后使用一些css，如下所示

HTML

<div class="myImageParent">
  <input class="myImage" type="image" src="https://www.w3schools.com/tags/img_submit.gif" />
</div>

---

请参见此处的演示：

您可以将输入更改为img吗？是的，您可以尝试检查此问题，我需要输入以提交表单（html从jsf页面生成，请参阅我的编辑），在这种情况下，您需要将css应用于输入-检查更新的答案。我希望图像保持原始大小（48x48）虽然背景颜色应该覆盖整个div，但这是不可能的-输入和图像都是相同的-您不能针对单个-秒选项，您可以尝试将此作为背景图像检查片段。是的，它做到了！诀窍是使用背景图像：url（“）；Thx！我不想拉伸图像：-）我可以，但我需要背景颜色来填充整个div背景颜色：#f0f0；这种颜色？请检查最后一种颜色也可以使用背景颜色

.myImageParent{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;   
    background-color: #eff;
}

.myImage{
    max-width: 100%;
    max-height: 100%;   
}