【问题标题】: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>

【问题讨论】:

标签: 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;这个颜色?
      • 请检查最后一个,背景颜色也适合你
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-04-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-12-31
      • 2018-03-27
      相关资源
      最近更新 更多