如何根據螢屏大小動態地縮小尺寸，當我調整瀏覽器視窗的大小時，影像就會斷裂，如2中所示。如何動態地調整影像的大小而不斷裂。如何修改css以獲得所需的輸出。
<html>
<head>
<script src="https://kit. fontawesome.com/50b310a6f3.js" crossorigin="anonymous">
</script>/span>
<title>狀態欄</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{
顯示: inline-block;
width: 196px;
位置：相對。
*/
.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 {
寬度：40px。
高度: 95px;
} */
ul li .fas{
background: #ccc;
width: 16px;
height: 16px;
color: #fff;
border-radius: 50%;
padding: 5px;
}
ul li .fas：:after {
content: ''/span>;
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{
背景。#01dcdc;
} */
ul .two .fas:after {
background: #01dcdc;
}
/* ul li:nth-child(3) .fas::after {
背景。#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>/span>
<li class="one">
< img id="imageOne" class="imageOne" src="1。 png"><br>>
<i id="iconOne" class="fas fa-check"> </i>>
<p id="textOne"/span> style="font-size: 70%;">應用注冊于
Cynapse</p>/span>注冊的應用程式。
</li>/span>
<li class="two">
< img id="imageTwo" class="imageTwo" src="2。 png"><br>>
< i id="iconTwo" class="fas fa-sync"> </i>>
<p id="textTwo"/span> style="font-size: 70%;">賬戶創建完成于
Cashe</p>
</li>/span>
<li class="three">
< img id="imageThree" class="imageThree" src="3。 png"><br>>
< i id="iconThree" class="fas fa-calculator"> </i>>
<p id="textThree"/span> style="font-size: 70%;">Cynapse公司估計，在高/低/中等程度上
用Cashe</p>為您的貸款提供擔保的概率為高/低/中。
</li>/span>
<li class="four">
< img id="imageFour"/span> class="imageFour" src="4。 png"><br>>
<i id="iconFour" class="fas fa-tasks"> </i>>
<p id="textFour"/span> style="font-size: 70%;">完成Cashe App的最后一步</p>
</li>/span>
<li class="five">/span>
< img id="imageFive" class="imageFive" src="5。 png"><br>>
< i id="iconFive" class="fas fa-university" > </i>>
<p id="textFive"/span> style="font-size: 70%;">貸款已發放</p>
</li>/span>
</ul>/span>
<!-- <button onclick="myFunction()">press</button> -->
</div>
<script>
var json_received = {
"Sheet1": [
{
"狀態"。"1",
"Image1": "1.png",
"Text1": "Application Received Test",
"Image2": "2.png",
"Text2": "已發送至合作伙伴"。
"Image3": "3.png",
"Text3": "Cynapse估計您在Cashe獲得貸款的概率為高/低/中。
貸款的概率"。
"Image4": "4.png",
"Text4": "由合作伙伴處理"。
"Image5": "2.png",
"Text5": "由合作伙伴處理"
}
]
};
// 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)。
如果(status ==1)
{
// jsonDataStr = JSON.stringify(json_received);
// json = JSON.parse(jsonDataStr);
// TEXT元素
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";
}
如果(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";
}
如果(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";
}
如果(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";
}
如果(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>/span>
</html>
uj5u.com熱心網友回復：
像這樣嘗試：
<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>/span>
</body>
</html>
uj5u.com熱心網友回復：
你可以試試這個作為你的HTML文本：
<div id='dynamicText' > 這個是我的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>>
簡單地說，screen.height是你的螢屏的實際最大尺寸，innerHeight是當前尺寸。你可以使用這些來創建顯示字體大小的比例。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/321637.html
標籤：