首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用img HTML调整输入的大小

如何使用img HTML调整输入的大小
EN

Stack Overflow用户
提问于 2018-08-03 03:35:11
回答 1查看 68关注 0票数 2

我想在使用移动版本时调整输入文本的大小,但我不知道怎么做,你能帮我吗?例如:如何自动调整大输入文本的大小,使其适合较小宽度的div容器,同时保持其宽高比?这是我的脚本:

代码语言:javascript
复制
<!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>
EN

回答 1

Stack Overflow用户

发布于 2018-08-03 04:36:36

像这样

代码语言:javascript
复制
img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

代码语言:javascript
复制
input {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51660969

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档