Html输入类型图片：不拉伸图片答案

【问题标题】：Html input type image: don't stretch imageHtml输入类型图片：不拉伸图片
【发布时间】：2019-09-16 10:28:55
【问题描述】：

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

    <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: 100%;">
    </div>

【问题讨论】：

你能把输入改成img吗？
是的，你可以试试看w3schools.com/css/css3_object-fit.asp，

标签： html css button input

【解决方案1】：

尝试使用作为背景图像，您可以根据自己的要求制作图像，输入将是全高和全宽。检查sn-p。

input {
  width: 100%;
  height: 300px;
  padding: 0px !important;
  background-image:url("https://www.w3schools.com/tags/img_submit.gif");
  background-repeat:no-repeat;
}

<div style="width: 300px; height: 300px">
  <div style="width: 300px; height: 300px">
    <input style="background-color: #f0f0f0;border: solid 1px #a8a8a8;padding:1px 6px;cursor:pointer;width: 100%;">
  </div>

</div>

【讨论】：

我需要输入来提交表单（html 是从 jsf 页面生成的，请参阅我的编辑）
在这种情况下，您需要将 css 应用于输入 - 检查更新的答案。
我希望图像保持原始大小（48x48），而背景颜色应覆盖整个 div
这是不可能的 - 输入和图像都将是相同的，你不能针对个人 - 第二个选项你可以试试这个作为背景图像检查 sn-p。
是的，它做到了！诀窍在于使用 background-image:url("w3schools.com/tags/img_submit.gif"); 谢谢！

【解决方案2】：

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

HTML

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

CSS

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

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

在此处查看演示：http://www.cssdesk.com/JCw9M

【讨论】：

【解决方案3】：

图像原本很小，所以拉伸时无论如何都会损坏。我认为你可以使用 svg svg MDN

【讨论】：

我不想拉伸图像:-)

【解决方案4】：

如果你想让图片保持原始大小并且背景颜色应该覆盖整个div，那么输入类型的图片是不可能的，但是你可以试试这个：

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

【讨论】：

【解决方案5】：

您可以通过在输入标签中将宽度从 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
背景色：#f0f0f0;这个颜色？
请检查最后一个，背景颜色也适合你