图片按比例设置

图片按比例设置:

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
mixin img-fit() {
object-fit: cover;
object-position: 50% 50%;
// font-family: 'object-fit: cover; object-position: 50% 50%';
width: 100%;
height: 100%;
}

%img-fit {
@include img-fit();
}

.responsive-media {
display: block;
overflow: hidden;
padding: 0;
position: relative;
background: transparent;
z-index: 1;
img,
picture,
iframe,
embed,
object,
video {
@extend %img-fit;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
}

@mixin responsive-ratio($x,$y) {
height: 0;
padding-bottom: percentage($y / $x);
}
.responsive-media{
@include responsive-ratio(2, 3);//图片2:3
}

如果知道一张图片的宽高比,图片大小随屏幕缩放:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
图片父元素用padding-bottom撑开高度,然后图片可以height 100%, 再用上object-fit: cover;

.parent {
position: relative;
margin: 0 auto;
padding-bottom: 60%;
}

.parent img{
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
}