Reputation: 3

How to dynamically reduce the size according to screen size

this is the ouput of this code when the screen is hsrinked it breaks

How to dynamically reduce the size according to screen size, when i resize the browser window the image breaks as showin in 2.How to dynamically resize the image without breaking it.How to modify the css in order to get the desired output.

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/50b310a6f3.js" crossorigin="anonymous"> 
</script>

<title>status bar</title>
<style>

body{
background-position: center;
font-family: sans-serif;
/* position:fixed; */
height :100%    ;
width: 100%;
 }
.progress img{
    width: 90px;
    margin-bottom: 20px ;
    
}
.progress {
    margin: 300px auto;

    /* position:fixed; */
    /* width :100%  ;        */
}
ul{
    text-align: center;

}
/* ul li{
    display: inline-block;

    width: 196px;
    position: relative;
} */
.one {
    display: inline-block;
    width: 196px;
    position: relative;
}
.two {
    display: inline-block;
    width: 196px;
    position: relative;
}
.three {
    display: inline-block;
    width: 196px;
    position: relative;
    top: 23.5px;
}
.four {
    display: inline-block;
    width: 196px;
    position: relative;
}
.five {
    display: inline-block;
    width: 196px;
    position: relative;
}
ul li img{
    width: 40px;
    height: 95px;
}
/* .imageThree {
    width: 40px;
    height: 95px;
} */
ul li .fas{
    background: #ccc;
    width: 16px;
    height: 16px;
    color: #fff;
    border-radius: 50%;
    padding: 5px;
}
ul li .fas::after {

    content: '';
    background: #ccc;
    height: 5px;
    width: 200px;
    display: block;
    position: absolute;
    left: 0;
    top: 130px;
    z-index: -1;
}
ul .two .fas{
    background: #01dcdc;

}
.imageThree {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
.imageFour {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
.imageFive {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

/* .fasThree{
    background: #01dcdc;

} */
ul .two .fas::after {


    background: #01dcdc;
}
/* ul li:nth-child(3) .fas::after {
    background: #01dcdc;
} */
ul li:nth-child(1) .fas
 {
    background: #53AD8B;
}
ul li:nth-child(1) .fas::after
{
    background: #53AD8B;
}
</style>

  </head>


  <body>
  <div class="progress" contenteditable="true">
    
  <ul>
    
    <li class="one">
        <img id="imageOne" class="imageOne" src="1.png"><br>
        <i id="iconOne" class="fas fa-check"></i>
        <p id="textOne" style="font-size:70%;">Application registered with 
   Cynapse</p>
    </li>

    <li class="two">
        <img id="imageTwo" class="imageTwo" src="2.png"><br>
        <i id="iconTwo" class="fas fa-sync"></i>
        <p id="textTwo" style="font-size:70%;">Account creation completed on 
    Cashe</p>
    </li>
    <li class="three">
        <img id="imageThree" class="imageThree" src="3.png"><br>
        <i id="iconThree" class="fas fa-calculator"></i>
        <p id="textThree" style="font-size:70%;">Cynapse estimates a High/low/medium 
    probability of securing your loan with Cashe</p>
    </li>
    <li class="four">
        <img id="imageFour" class="imageFour" src="4.png"><br>
        <i id="iconFour" class="fas fa-tasks"></i>
        <p id="textFour" style="font-size:70%;">Complete final step in Cashe App</p>
    </li>
    <li class="five">
        <img id="imageFive" class="imageFive" src="5.png"><br>
        <i id="iconFive" class="fas fa-university"></i>
        <p id="textFive" style="font-size:70%;">Loan disbursed</p>
    </li>
    

  </ul>
  <!-- <button onclick="myFunction()">press</button> -->
    
  </div>
  <script>

   var json_received = {
   "Sheet1": [
    {
        "Status": "1",
        "Image1": "1.png",
        "Text1": "Application Received Test",
        "Image2": "2.png",
        "Text2": "Sent to partner",
        "Image3": "3.png",
        "Text3": "Cynapse estimates a High/low/medium probability of securing your 
       loan with Cashe",
        "Image4": "4.png",
        "Text4": "Processing by partner",
        "Image5": "2.png",
        "Text5": "Processing by partner"
       }
      ]
     };


    // function myFunction(){
        window.onload =  function(){

        // var id = window.prompt("Enter the process id: ");
        // alert("you are under process " + id);
    //  if(id ==0)
    // {

    //  var a = document.getElementById('css');
    //     a.href = "style.css";

    //  document.getElementById("iconOne").className = "fas fa-sync";
    // }
        jsonDataStr = JSON.stringify(json_received);
        json = JSON.parse(jsonDataStr);
        var status = json.Sheet1[0].Status;
        console.log(status);
     if(status ==1)
    {

        // jsonDataStr = JSON.stringify(json_received);
        // json = JSON.parse(jsonDataStr);
        //TEXT element
        console.log(json.Sheet1[0].Text1);

        var paraOne = document.getElementById("textOne");
        paraOne.innerHTML = json.Sheet1[0].Text1;
        console.log(paraOne.innerHTML);
        console.log(document.getElementById("imageOne").src);
        document.getElementById("imageOne").src = json.Sheet1[0].Image1;


        var a = document.getElementById('css');
        a.href = "style2.css";
        
        document.getElementById("iconOne").className = "fas fa-check";
        document.getElementById("iconTwo").className = "fas fa-sync";
    }
    if(status==2)
    {
        var paraTwo = document.getElementById("textTwo");
        paraTwo.innerHTML = json.Sheet1[0].Text1;
        console.log(paraTwo.innerHTML);
        console.log(document.getElementById("imageTwo").src);
        document.getElementById("imageTwo").src = json.Sheet1[0].Image2;
        var a = document.getElementById('css');
        a.href = "style3.css";

    


        document.getElementById("iconOne").className = "fas fa-check";
        document.getElementById("iconTwo").className = "fas fa-check";
        document.getElementById("iconThree").className = "fas fa-sync";
        

    }
    if(status==3)
    {
        var paraThree = document.getElementById("textThree");
        paraThree.innerHTML = json.Sheet1[0].Text3;
        console.log(paraThree.innerHTML);
        console.log(document.getElementById("imageThree").src);
        document.getElementById("imageThree").src = json.Sheet1[0].Image3;
        var a = document.getElementById('css');
        a.href = "style4.css";
    

        document.getElementById("iconOne").className = "fas fa-check";
        document.getElementById("iconTwo").className = "fas fa-check";
        document.getElementById("iconThree").className = "fas fa-check";
        document.getElementById("iconFour").className = "fas fa-sync";


    }
    if(status==4)
    {
        var paraFour = document.getElementById("textFour");
        paraFour.innerHTML = json.Sheet1[0].Text4;
        console.log(paraFour.innerHTML);
        console.log(document.getElementById("imageFour").src);
        document.getElementById("imageFour").src = json.Sheet1[0].Image4;
        var a = document.getElementById('css');
        a.href = "style5.css";
        

        document.getElementById("iconOne").className = "fas fa-check";
        document.getElementById("iconTwo").className = "fas fa-check";
        document.getElementById("iconThree").className = "fas fa-check";
        document.getElementById("iconFour").className = "fas fa-check";
        document.getElementById("iconFive").className = "fas fa-sync";



    }
    if(status==5)
    {
        var paraFive = document.getElementById("textFive");
        paraFive.innerHTML = json.Sheet1[0].Text5;
        console.log(paraFive.innerHTML);
        console.log(document.getElementById("imageFive").src);
        document.getElementById("imageFive").src = json.Sheet1[0].Image5;
        var a = document.getElementById('css');
        a.href = "style6.css";
        

        document.getElementById("iconOne").className = "fas fa-check";
        document.getElementById("iconTwo").className = "fas fa-check";
        document.getElementById("iconThree").className = "fas fa-check";
        document.getElementById("iconFour").className = "fas fa-check";
        document.getElementById("iconFive").className = "fas fa-check";

    }

        
    }

  </script>
  </body>
  </html>

Upvotes: 0

Answers (2)

Sunday Ikpe

Reputation: 974

You could try this as your html text:

<div id='dynamicText'>This is my text text</div>

And this for your javascript:

<script>
    var start_size = 16;
    document.querySelector('#dynamicText').style.fontSize = `${start_size}em`;
    addEventListener('resize', ()=>{
        let prop = window.innerHeight/screen.height;
        document.querySelector('#dynamicText').style.fontSize = `${prop*start_size}em`;
    });
</script>

Simply explained the screen.height is the actual max size for your screen and the innerHeight is the current size. You could use these to create proportions for the displayed font sizes.

Upvotes: 0

Nandan

Reputation: 422

Try like this:

    <html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .imgbox {
            display: grid;
            height: 100%;
        }
        .center-fit {
            max-width: 100%;
            max-height: 100vh;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="imgbox">
    <img class="center-fit" src='pic.png'>
</div>
</body>
</html>

Upvotes: 1

How to dynamically reduce the size according to screen size

Answers (2)

Related Questions