javascript - 如何根据屏幕尺寸动态缩小尺寸
问题描述
如何根据屏幕尺寸动态减小尺寸,当我调整浏览器窗口的大小时,图像会中断,如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>
解决方案
试试这样:
<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>
推荐阅读
- javascript - 登录表单,没有任何反应
- spring-boot - ServiceMonitor 使用 TLS 抓取 Spring 微服务
- javascript - Javascript json diff 补丁 html 查看器与演示不匹配
- ruby-on-rails - 从文件读取设置的全局变量不会随着应用程序重启而更新
- javascript - 调度动作后如何发送响应以做出反应
- python - Django wsgi subprocess.Popen 进程在 gunicorn 重启时死亡
- recharts - Recharts AreaCharts 拖动并显示变化百分比功能
- reactjs - 如何在 react-leaflet 中使用 Typescript 设置对“leafletElement”的引用?
- javascript - 从两个数组中删除相等的对象
- android - React-native google 登录在发布模式下无法正常工作