How to resize an input with img HTML

Question

I want to resize input text When using mobile version but I don't know how, Can you help me Ex: How do you auto-resize a large [ input text ] so that it will fit into a smaller width div container whilst maintaining its width:height ratio? This is my script:

<!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>

You need to be a bit more specific. You have to define the rules of sizing that input so that nobody can understand differently than what you mean. Right now it's likely 4 out of 5 people understand different things from your requirement. What exactly do you want to determine the input's width? The parent's width, the device width, the width in px of the <img>? What exactly do you want to determine the the input's height? A particular ratio of the width? A ratio of device or parent width? Or of their height? Please describe it so there is no confusion whatsoever. — tao
Also, what do you mean by "it will fit"? Will it stretch, will it downsize keeping a particular ratio between width and height? What sets that ratio? Is it different on devices with different width/height ratio? Is it different in landscape/portrait modes? — tao
When I want to open a page in the mobile The image size changes only I want to change <input... with her look i.imgur.com/jTWCCIH.png — serenij cindy
When I want to change the page size I want to change the input size with it [width,height] — serenij cindy
please see the script I want to change input position with img — serenij cindy

serenij cindy serenij cindy · Accepted Answer · 2018-08-02T20:36:36

like this

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

and

input {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

How to resize an input with img HTML

1 Answers