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

作者: 哇塞
发布时间: 2024-01-12 08:16:34 (3月前)
转自：

4 条回复

0#
回复此人
独奏♪ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只需添加一些填充： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> input { border: 1px solid black; padding: 100px; } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <div id="container"> <input type=file> </div> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
1#
回复此人
star | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以使用 <code> display:flex </code> 随着 <code> align-items </code> 和 <code> justify-content </code> 在...上 <code> #container </code> DIV。 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> #container { border: 1px solid black; width: 400px; height: 400px; display: flex; align-items: center; justify-content: center; } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <div id="container"> <input type="file" /> </div> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
2#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以使用CSS将Drag＆amp; Drop部分设置为整个容器的大小： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> .file { height: 300px; display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; } .file-input { width: 100%; height: 100% } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <div class="file"> <input class="file-input" type="file"> </div> </code> </pre> </DIV> </DIV> <P> </p> <P> 但是为了使“预览”居中并将所有区域拖放到你必须使用Js，这里有一个CodePen你可以作为基础： <a href="https://codepen.io/prasanjit/pen/NxjZMO" rel="nofollow noreferrer"> https://codepen.io/prasanjit/pen/NxjZMO </A> 。 </p> </DIV>

编辑

登录后才能参与评论