最大化等比例测试演化Demo

Posted 2021-02-15 exesoft

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了最大化等比例测试演化Demo相关的知识，希望对你有一定的参考价值。

demo-1:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>满屏等比例缩放测试</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
html, body, #container {
	width: 100%;
	height: 100%;
}
#container {
	background-color: #CCC;
	position:relative;
}
#incontainer {
	background-color: blue;
	position:absolute;
	width: 90%;
	height: 90%;
	top:5%;
	left:5%;
}
#inincontainer {
	background-color: red;
	position:absolute;
	width: 90%;
	height: 90%;
	top:5%;
	left:5%;
}
</style>
</head>
<body>
<div id="container">
  <div id="incontainer">
  <div id="inincontainer">
   </div>
   </div>
</div>
</body>
</html>

demo-2:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>满屏等比例缩放测试</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
html, body, #container {
	width: 100%;
	height: 100%;
}
#container {
	background-color: #grey;
	
}
#incontainer {
	position:relative;
	width: 90%;
	height: 90%;
	margin-left:5%;
	/*margin-right:5%;*/
	top:5%;
	background-color: blue;
}
#inincontainer {
	position:relative;
	width: 90%;
	height: 90%;
	margin-left:5%;
	/*margin-right:5%;*/
	top:5%;
	background-color: pink;
}
</style>
</head>
<body>
<div id="container">
  <div id="incontainer">
  <div id="inincontainer">
   </div>
   </div>
</div>
</body>
</html>

demo-3:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>满屏等比例缩放测试</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
html, body, #container {
	width: 100%;
	height: 100%;
}
#container {
	background-color: #grey;
	
}
#incontainer {
	position:relative;
	width: 90%;
	height: 90%;
	margin-left:5%;
	top:5%;
	background-color: blue;
}
#inincontainer {
	position:relative;
	width: 30%;
	height: 30%;
	left:50%;
	top:50%;
	background-color: pink;
}
</style>
</head>
<body>
<div id="container">
  <div id="incontainer">
  <div id="inincontainer">
   </div>
   </div>
</div>
</body>
</html>

demo-4:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>满屏等比例缩放测试</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
html, body, #container {
	width: 100%;
	height: 100%;
}
#container {
	background-color: #grey;	
}
#incontainer {
	padding:3.12% 5% 3.12% 5%;
	width: 90%;
	height: 90%;
	background-color: blue;
}
#inincontainer {
    padding:3.12% 5% 3.12% 5%;
	width: 90%;
	height: 90%;
	background-color: pink;
}
</style>
</head>
<body>
<div id="container">
  <div id="incontainer">
  <div id="inincontainer">
   </div>
   </div>
</div>
</body>
</html>

小结:

1.border宽度使用百分比,没有效果,故不要使用.

2.padding-top,padding-bottom 使用百分比,以父盒子宽度为基准,所以为了达到满屏,数值需要修订.比如上述的padding值得3.12是一个修订值.

以上是关于最大化等比例测试演化Demo的主要内容，如果未能解决你的问题，请参考以下文章

php等比例缩放图片及剪切图片代码

JS等比例缩放图片,限定最大宽度和最大高度

php实现等比例不失真缩放上传图片的方法

S实现控制图片显示大小的方法图片等比例缩放功能

php实现等比例不失真缩放上传图片

php等比缩放图片