关于Img标签在固定宽高的容器内部以图片比...

纯洁的代码
197 阅读5分钟
关于Img标签在固定宽高的容器内部以图片比例缩放存在

写这篇文章对自己的想法做一些总结等

起因: 下载一些素材的时候看到排版方式是（下图）的样子，


而且图片基本上都是没有变形，扭曲 就产生了"兴趣",看了看源码 又自己想了几种方式方法;

这个源代码采用JS遍历的方式对每一个图片进行布局

而我打算采用 CSS进行图片的样式布局（暂时只想到了三种方式）

（1）父级相对定位，子级 绝对定位 设置图片居中等比显示
[JavaScript]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试1111111</title>
<style>
*{margin:0;padding:0;}
div{
width: 200px;
height: 200px;
border: 1px solid #000;
margin-left: 15px;
margin-bottom: 15px;
float: left;
overflow: hidden;
position: relative;
}
div img {
position: absolute;
max-width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto; /* 设置四个值为零,margin:auto;可以设置元素水平垂直居中 */
}
</style>
</head>
<body>
<div><img src="./images/kul.jpg" alt=""></div>
<div><img src="./images/lf.png" alt=""></div>
<div><img src="./images/timg (1).jpg" alt=""></div>
</body>
</html>


（2）采用 img 标签为行内快的特性进行等比
[JavaScript]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试222222</title>
<style>
*{margin:0;padding:0;}
div{
width: 200px;
height: 200px;
line-height: 200px;
border: 1px solid #000;
margin-left: 15px;
margin-bottom: 15px;
float: left;
text-align: center;
overflow: hidden;
}
div img {
/*采用行内块的特性进行图片的垂直居中特性
图片设置最大宽度和最小宽度;
vertical-align--> 文字对齐方式采用middle 居中
*/
max-width: 200px;
max-height: 200px;
vertical-align: middle;
}
</style>
</head>
<body>
<div><img src="./images/kul.jpg" alt=""></div>
<div><img src="./images/lf.png" alt=""></div>
<div><img src="./images/timg (1).jpg" alt=""></div>
</body>
</html>

（3）采用 object-fit && object-position 的方式进行布局；

这第三种方式我也是在网上找了一些资料查阅对这两个属性不清楚的同学可以查看张鑫旭大佬个人博客章节

半深入理解CSS3 object-position/object-fit属性

[JavaScript]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试3333333</title>
<style>
*{margin:0;padding:0;}
div{
width: 200px;
height: 200px;
border: 1px solid #000;
margin-left: 15px;
margin-bottom: 15px;
float: left;
overflow: hidden;
position: relative;
}
div img {
/* 宽高100%
设置的是 IMG 标签的 关于 内容src的宽高属性会根据内容自动填充,会产生不完整的现象
*/
width: 100%;
height: 100%;
object-fit:none; /* 默认情况显示 */
object-position: center; /* 图片内容采用 center 方式进行居中 */
}
</style>
</head>
<body>
<div><img src="./images/kul.jpg" alt=""></div>
<div><img src="./images/lf.png" alt=""></div>
<div><img src="./images/timg (1).jpg" alt=""></div>
</body>
</html>
---------------------
作者：menKanXu
来源：CSDN
原文：https://blog.csdn.net/xutongze_111/article/details/83998407 


avatar
文章
阅读
粉丝