如何使用 img HTML 调整输入的大小
Posted
技术标签:
【中文标题】如何使用 img HTML 调整输入的大小【英文标题】：How to resize an input with img HTML 【发布时间】：2019-01-10 15:49:10 【问题描述】：我想调整输入文本的大小 使用移动版但我不知道如何，你能帮帮我吗 例如：您如何自动调整大 [输入文本] 的大小，使其适合较小宽度的 div 容器，同时保持其宽高比？ 这是我的脚本：
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>Ex.</title>
<style>
img
width: 100%; /* or any custom size */
height: 100%;
object-fit: contain;
</style>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form id="dr.s1x" onSubmit="return false">
<!-- dr.s1x -->
<div id="ph1">
<img src="https://image.ibb.co/jKF3Dz/Screenshot_2018_07_29_10_50_49.png" ondragstart="return false;"/>
<input class="gredient_input" type="email" placeholder="Email" id="usr0" name="usr0" style="position: absolute; z-index: 0; visibility: visible; left: 66px; top: 143px; width: 660px; height: 44px;" autocomplete="off" tabindex="1" onKeyDown="doSomething1()" onkeyup="lettersOnly(this)" />
<input class="gredient_input" type="password" placeholder="Mot de passe" id="usr1" name="usr1" style="position: absolute; z-index: 0; visibility: visible; left: 66px; top: 192px; width: 656px; height: 44px;" autocomplete="off" tabindex="1" onKeyDown="doSomething2()" />
<a class="close" style="position: absolute; left: 62px; top: 257px; width: 679px; height: 44px; visibility: visible;" onClick="master()"></a>
</div>
</form>
</body>
</html>
【问题讨论】：
您需要更具体一点。您必须定义输入大小的规则，以便没有人能理解您的意思。现在很可能五分之四的人理解与您的要求不同的事情。你到底想确定输入的宽度是什么？父级的宽度，设备的宽度，<img>的宽度，单位px？您到底想确定输入的高度是什么？宽度的特定比例？设备或父宽度的比率？还是他们的身高？请描述它，以免造成任何混淆。
另外，“它会适合”是什么意思？它会拉伸吗？它会缩小尺寸吗？保持宽度和高度之间的特定比例？是什么决定了这个比例？在具有不同宽度/高度比的设备上是否有所不同？横向/纵向模式有什么不同吗？
当我想在手机中打开一个页面时图像大小只改变我想改变喜欢这个
img
width: 100%; /* or any custom size */
height: 100%;
object-fit: contain;
和
input
width: 100%; /* or any custom size */
height: 100%;
object-fit: contain;
【讨论】：
以上是关于如何使用 img HTML 调整输入的大小的主要内容，如果未能解决你的问题，请参考以下文章