如何增加输入文件元素的面积？

Question

我正在使用一些样式来增加输入文件元素的区域。为了方便将文件丢弃到此元素，我想增加其面积。使用css属性宽度和高度会增加区域，但是有一种方法可以将选择文件与中间或中心对齐。

<div id="container">

<input type=file style="border: 1px solid black; width: 400px; height: 400px;">

</div>

是否有可能使用css和html实现这样的东西？我感谢任何帮助！

Answer 1

您可以使用CSS将Drag＆Drop部分设置为整个容器的大小：

.file {
  height: 300px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.file-input {
  width: 100%;
  height: 100%  
}

<div class="file">
  <input class="file-input" type="file">
</div>

但是为了使“预览”居中并且让所有区域都拖放你必须使用Js，这里有一个CodePen你可以作为基础：https://codepen.io/prasanjit/pen/NxjZMO。

Answer 2

您可以在display:flex div上使用align-items以及justify-content和#container。

#container {
  border: 1px solid black;
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div id="container">

  <input type="file" />

</div>

Answer 3

只需添加一些填充：

input {
  border: 1px solid black;
  padding: 100px;
}

<div id="container">
  <input type=file>
</div>