代码之家 › 专栏 › 技术社区 › Neo

Html输入类型图像:不拉伸图像

jsf-2.2 input button css html

-2

Neo · 技术社区 · 6 年前

我有一个图像类型的输入。有没有办法让输入覆盖父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>

3 回复 | 直到 6 年前

1

Sumit Patel user1723330 6 年前

尝试使用作为背景图像,您将能够根据您的要求制作图像,输入将是全高和全宽。检查代码段。

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>

2

1

Shamim 6 年前

首先设置父div的宽度和高度,然后使用下面的css。

HTML格式

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

.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

0

nart 6 年前

图像本来很小,所以当拉伸时,它无论如何都会断开。我想你可以用svg代替 svg MDN

4

0

4LPH4 6 年前

如果您想保持图像的原始大小,并且背景色应该覆盖整个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

0

sandesh lande 6 年前

您可以通过将输入标记的宽度从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>

或者删除width、height from Div和width from input tag

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