图片等比例缩放方案
在Web开发时无可避免的需要将图片进行缩放，缩放时需要保证图片不变形，也就是需要等比例缩放。
设定宽度或高度
引入图片时，仅设置图片的width或者是height就可以使另一边自适应，从而实现等比例缩放。
1
2
3
4
5
6
7
8
9
10
11
12
| <section>
<img id="t1" src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg">
<img id="t2" src="http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg">
</section>
<style type="text/css">
#t1{
width: 500px;
}
#t2{
height: 300px;
}
</style>
|
设定最大宽度或最大高度
引入图片时，仅设置图片的max-width或者是max-height就可以使另一边自适应，从而实现等比例缩放。
1
2
3
4
5
6
7
8
9
10
11
12
| <section>
<img id="t3" src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg">
<img id="t4" src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg">
</section>
<style type="text/css">
#t3{
max-width: 500px;
}
#t4{
max-height: 300px;
}
</style>
|
根据父容器适应
将图片设定为max-width: 100%;与max-height: 100%;，就可以自适应父容器宽高进行等比缩放。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <section>
<div id="t5">
<img src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg">
</div>
</section>
<style type="text/css">
#t5{
height: 300px;
width: 600px;
border: 1px solid #eee;
display: flex;
justify-content: center;
}
#t5 > img{
max-width: 100%;
max-height: 100%;
}
</style>
|
使用Js设定宽高
使用JavaScript预先取得图片并根据指定的高度或者是宽度计算缩放比，从而计算出另一边的长度，设定好宽高后加入文档。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <section>
<div id="t6"></div>
</section>
<script type="text/javascript">
var img = new Image();
var height = 300;
img.src = "http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg";
img.onload = function(){
var scale = height / this.height;
this.height = height;
this.width = this.width * scale;
document.getElementById("t6").appendChild(this);
}
</script>
|
使用CSS背景属性
使用CSS的background属性进行等比缩放。
1
2
3
4
5
6
7
8
9
10
11
12
| <section>
<div id="t7"></div>
</section>
<style type="text/css">
#t7{
height: 300px;
width: 600px;
border: 1px solid #eee;
background: url("http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg") center center no-repeat;
background-size: contain;
}
</style>
|
使用CSS转换属性
使用CSS的transform属性直接进行缩放。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <section>
<div id="t8">
<img src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg">
</div>
</section>
<style type="text/css">
#t8{
height: 300px;
width: 500px;
overflow: hidden;
}
#t8 > img{
transform: scale(0.6);
transform-origin: 0 0;
}
</style>
|
使用CSS适应属性
使用CSS的object-fit属性直接进行图片适应缩放。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <section>
<div id="t9">
<img src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg">
</div>
</section>
<style type="text/css">
#t9{
height: 300px;
width: 600px;
border: 1px solid #eee;
display: flex;
justify-content: center;
}
#t9 > img{
object-fit: contain;
}
</style>
|
代码示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
| <!DOCTYPE html>
<html>
<head>
<title>图片等比例缩放</title>
<style type="text/css">
#t1{
width: 500px;
}
#t2{
height: 300px;
}
#t3{
max-width: 500px;
}
#t4{
max-height: 300px;
}
#t5{
height: 300px;
width: 600px;
border: 1px solid #eee;
display: flex;
justify-content: center;
}
#t5 > img{
max-width: 100%;
max-height: 100%;
}
#t7{
height: 300px;
width: 600px;
border: 1px solid #eee;
background: url("http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg") center center no-repeat;
background-size: contain;
}
#t8{
height: 300px;
width: 500px;
overflow: hidden;
}
#t8 > img{
transform: scale(0.6);
transform-origin: 0 0;
}
#t9{
height: 300px;
width: 600px;
border: 1px solid #eee;
display: flex;
justify-content: center;
}
#t9 > img{
object-fit: contain;
}
</style>
</head>
<body>
<section>
<img id="t1" src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg">
<img id="t2" src="http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg">
</section>
<section>
<img id="t3" src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg">
<img id="t4" src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg">
</section>
<section>
<div id="t5">
<img src="http://www.sdust.edu.cn/__local/9/7A/B1/F29B84DEF72DD329997E8172ABA_664BA3EF_32466.jpg">
</div>
</section>
<section>
<div id="t6"></div>
</section>
<section>
<div id="t7"></div>
</section>
<section>
<div id="t8">
<img src="http://www.sdust.edu.cn/__local/1/95/CB/EDC1450B8FD1B8A25FAAC726AA4_A36D4253_16C91.jpg">
</div>
</section>
<section>
<div id="t9">
<img src="http://www.sdust.edu.cn/__local/F/7A/AA/E1459849AA8AB0C89854A41BD41_BF3BD857_BC0D8.jpg">
</div>
</section>
</body>
<script type="text/javascript">
var img = new Image();
var height = 300;
img.src = "http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg";
img.onload = function(){
var scale = height / this.height;
this.height = height;
this.width = this.width * scale;
document.getElementById("t6").appendChild(this);
}
</script>
</html>
|
