CssDiv等⽐例缩放整理（⼀）⼀、CSS Div等⽐例缩放 1
百分⽐+fixed；占据屏幕的固定⽐例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
html {
padding: 0px;
margin: 0px;
}
/*百分⽐设置div等⽐例缩放*/
.propotion {
width: 50%;
height: 50%;
background: red;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="propotion">
当前div宽度50%，⾼度50%
</div>
</body>
</html>
⼆、Css Div等⽐例缩放2
使⽤固定⽐例的透明图，控制div同⽐例缩放
案例使⽤ 3:2的透明图⽚，来扩充⽐例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/
*图⽚⾃适应设置div等⽐例缩放*/
.propotion {
border: 1.5px solid green;
width: 50%;
padding: 10px;
margin: auto;
}
.propotion img {
width: 100%;
}
</style>
</head>
<body>
<div class="propotion">
<img src="img.jnqianle/upload/images/202010/08/b333b73c-63ed-4a48-a0f5-dabce1a47560.jpg" alt="">
</div>
</body>
</html>
多个布局案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
.row {
border: 1px solid red;
padding: 20px;
}
.clear {
clear: both;
}
.row .block {
width: 33.33%;
border: 0px solid green;
float: left;
box-sizing: border-box;
padding: 20px;
}
.row .block .inner {
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}
.row .block .img {
background: red;
}
.row .block img {
width: 100%;
display: block;/**必须要加的**/
}
.
row .block .title {
font-size: 16px;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 10px 10px;
}
.row .block .summary {
padding: 0px 10px 10px 10px;
font-size: 12px;
color: #888;
}
</style>
</head>
<body>
<!-- 图⽚控制div等⽐例缩放案例 -->
<div class="row">
<div class="block">
<div class="inner">
<div class="img">
<img src="./img/3x2.png" alt="">
</div>
<div class="title">
图⽚控制div等⽐例缩放+图⽚展⽰
</div>
<div class="summary">
Css时间轴布局_Css时间轴布局案例整理
Css 左右循环动画_左右循环运动效果案例
Css ⽂字选中设置样式/Css 禁⽌⽂字选中
</div>
</div>
</div>
<div class="block">
<div class="inner">
<div class="img">
<img src="./img/3x2.png" alt="">
</div>
<div class="title">
图⽚控制div等⽐例缩放+图⽚展⽰
</div>
<div class="summary">
Css时间轴布局_Css时间轴布局案例整理                    Css 左右循环动画_左右循环运动效果案例                    Css ⽂字选中设置样式/Css 禁⽌⽂字选中</div>
</div>
</div>
<div class="block">
<div class="inner">
<div class="img">
<img src="./img/3x2.png" alt="">
</div>
<div class="title">
图⽚控制div等⽐例缩放+图⽚展⽰
</div>
<div class="summary">
Css时间轴布局_Css时间轴布局案例整理                    Css 左右循环动画_左右循环运动效果案例                    Css ⽂字选中设置样式/Css 禁⽌⽂字选中</div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
View Code
展⽰效果：
三、CssDiv等⽐例缩放案例
div等⽐例缩放+背景图，设置相册展⽰
cover模式：完全覆盖
contain模式：包含显⽰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.row {
border: 1px solid red;
padding: 20px;
}
.clear {
clear: both;
}
.row .block {
width: 33.33%;
border: 0px solid green;
float: left;
box-sizing: border-box;
padding: 20px;
}
.
row .block .inner {
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}
.row .block .img {
background: red center center/contain no-repeat;
/* background: red center center/cover no-repeat;  */
}
.row .block img {
width: 100%;
display: block;
}
.
row .block .title {
font-size: 16px;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 10px 10px;
}box sizing
.row .block .summary {
padding: 0px 10px 10px 10px;
font-size: 12px;
color: #888;
}
</style>
</head>
<body>
<!-- 图⽚控制div等⽐例缩放案例 +  -->
<div class="row">
<div class="block">
<div class="inner">
<div class="img"
> <img src="./img/3x2.png" alt="">
</div>
<div class="title">
图⽚控制div等⽐例缩放+图⽚展⽰
</div>
<div class="summary">
Css时间轴布局_Css时间轴布局案例整理
Css 左右循环动画_左右循环运动效果案例
Css ⽂字选中设置样式/Css 禁⽌⽂字选中
</div>
</div>
</div>
<div class="block">
<div class="inner">
<div class="img"
> <img src="./img/3x2.png" alt="">
</div>
<div class="title">
图⽚控制div等⽐例缩放+图⽚展⽰
</div>
<div class="summary">
Css时间轴布局_Css时间轴布局案例整理
Css 左右循环动画_左右循环运动效果案例
Css ⽂字选中设置样式/Css 禁⽌⽂字选中
</div>
</div>
</div>
<div class="block">
<div class="inner">
<div class="img"
>
<img src="./img/3x2.png" alt="">
</div>
<div class="title">
图⽚控制div等⽐例缩放+图⽚展⽰
</div>
<div class="summary">
Css时间轴布局_Css时间轴布局案例整理                    Css 左右循环动画_左右循环运动效果案例                    Css ⽂字选中设置样式/Css 禁⽌⽂字选中</div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
View Code
更多：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。