Question

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

Hospital.find({
    hospitalId: {
                 $eq: mongoose.Types.ObjectId(req.params.hospitalId)
                }
    }).then((hsptl)=>{
        let result = hsptl.map(a => a.pocId);
        User.find({
                _id: { $in:result }
        }).then((usr)=>{
             res.json(usr);
        });
    });

Answer 1

尝试用作背景图像，您将可以根据需要制作图像，并且输入的图像将为完整的高度和宽度。检查代码段。

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>

Answer 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

Answer 3

图像原本很小，所以拉伸时无论如何都会断裂。我认为您可以使用svg代替svg MDN

Answer 4

您可以通过在输入标签中将宽度从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;">

Answer 5

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

HTML输入类型图片：请勿拉伸图片

5 个答案: