0

I want to make div and its content fit to window and responsive in all devices

The div have a 4k resolution image with image map and also inputbox marked at a specific position in position to the image

I tried many ways all failed

In normal conditions the div dont fit in browser The best I tried scaling by javascript but it only scaled width and that to improperly it did not fit screen

The positions of input box and image map should strictly remain as it is while resizing according to browser screen and while responsive

Currently the page is viewable in full screen properly at 25% in 1360x768 screen.

<style>

body 
{
   margin: 0;
   padding: 0;
}

body 
{
   overflow: hidden; 
}

</style>


<style type="text/css">
  
.textbox {  
    display: flex;
    border: 1px solid rgb(223, 227, 235);
    border-radius: 4px;
    padding-left: 8px;
    font-family: 'Montserrat', 'Helvetica', sans-serif !important;
    font-size: 70px;
    color: #333;
    font-weight: 600;

 }  
.textbox:focus {  
    border-color: #66afe9; 
    border-style: solid; 
    border-width: 1px; 
    outline: 0; 
 } 
</style>
<!DOCTYPE html>

<html>

<div id = wrap>

<img src="https://i.imgur.com/qtZXRjx.png" usemap="#image-map" >

<map name="image-map">

    <area target="" alt="Continue" title="Continue" href="continue.php?" coords="2982,1952,3563,1774" shape="rect">

</map>


<input name="user" class="textbox" autocomplete="off" required type="text" style="position:absolute;height:193px;width:1655px;left:1887px;top:1415px;">

</div>

    
</html>
EliteX
  • 101
  • 2
  • why not give the image an `object-fit: contain;` so it will autofit the container? – tacoshy Feb 16 '21 at 21:14
  • For a responsive image map you are either going to need some JS to calculate the correct pixel positions, see e.g. the answer from @JoostS in Nov 2020 at [link] https://stackoverflow.com/questions/7844399/responsive-image-map on each load or resize or you could abandon image map and use absolute positioned elements at % offsets for areas. – A Haworth Feb 16 '21 at 23:23
  • Image map is not a issue the main problem is the input box element assigned to specific position to the image – EliteX Feb 17 '21 at 05:59

0 Answers0