html – make元素填充其父元素

发布时间：2020-12-14 18:34:15 所属栏目：资源来源：网络整理

导读：HTML： div img src="some/path/" class="thumbnail" / input type="file" class="image_upload" //div CSS： div{ border: 2px solid #ccc; width: 50px; height: 50px; overflow: hidden;}.thumbnail{ width: 100%;}.image_upload{ opacity: 0; position:

HTML：

<div>
  <img src="some/path/" class="thumbnail" />
  <input type="file" class="image_upload" />
</div>

CSS：

div
{
  border: 2px solid #ccc;
  width: 50px;
  height: 50px;
  overflow: hidden;
}
.thumbnail
{
  width: 100%;
}
.image_upload
{
  opacity: 0;
  position: absolute;
}

我想< img>和< input type =“file”>彼此重叠,并填写他们的父母< div>.我如何修复我的CSS来实现这一目标？

解决方法

无法更改文件输入的大小.你可以 redesign the file-input and,但是可点击区域的大小是不可修改的.

编辑：Aaron显示了第一个技巧,我添加了第二个技巧,所以请参阅this fiddle,其中整个图像可以单击进行文件输入.

诀窍是将font-size设置为较大的值,然后将opacity设置为零,最后将overflow：hidden添加到父元素.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!