图片大于div时的居中显示
当图片大于div时,想要图片居中显示,如果图片等比例缩小可能会导致图片不能填充整个div,如果直接将图片不设置宽高,将其外层div设置overflow:hidden;这时即使外层div设置了水平垂直居中,图片也不是居中的效果:
解决方法:
1- 把图片设置为背景图片
1
2
|
<div class = "face-img-contain" id= "face-img-back" > </div> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.face-img-contain{ width:348px; height:436px; margin:0 auto; margin-top: 14px; position: relative; background-image: url(../images/face-img/test-22.png); background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; justify-content: center; align-items: center; border: 1px solid gainsboro; } |
1
2
|
若是后台返回的地址,别忘了拼接方法正确 $( "#face-img-back" ).css( "background-image" , "url(" +faceImg+ ")" ); |
2- 给图片设置相对div的100%的宽高,再设置object-fit:cover;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<div class = "face-img-contain-new-new" > <img src= "../images/face-img/test-22.png" alt= "" class = "face-img-defined1" id= "face-img-photo" > </div> .face-img-contain- new - new { width:348px; height:436px; margin:0 auto; margin-top: 14px; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; border: 1px solid gainsboro; } .face-img-defined1{ width:100%; height:100%; object-fit: cover; } |