Как динамически уменьшить размер в соответствии с размером экрана

ProgramBox

Как динамически уменьшить размер в соответствии с размером экрана

Post author:admin
Запись опубликована:10 января, 2022
Post category:Вопросы по программированию

#javascript #html #css #image

Вопрос:

это выход из этого кода
когда экран перепечатывается, он ломается

Как динамически уменьшить размер в соответствии с размером экрана, когда я изменяю размер окна браузера, изображение разрывается, как показано на рисунке 2.Как динамически изменять размер изображения, не нарушая его.Как изменить css, чтобы получить желаемый результат.

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

Ответ №1:

Попробуй вот так:

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

Ответ №2:

Вы можете попробовать это в качестве своего html-текста:

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

И это для вашего 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>

Просто объяснил экран.высота-это фактический максимальный размер вашего экрана, а внутренняя высота-текущий размер. Вы можете использовать их для создания пропорций для отображаемых размеров шрифта.