扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本文小编为大家详细介绍“css实现图片大于div时的居中显示的方法”，内容详细，步骤清晰，细节处理妥当，希望这篇“css实现图片大于div时的居中显示的方法”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
站在用户的角度思考问题，与客户深入沟通，找到抚顺县网站设计与抚顺县网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站制作、网站设计、外贸网站建设、企业官网、英文网站、手机端网站、网站推广、主机域名、虚拟主机、企业邮箱。业务覆盖抚顺县地区。
当图片大于p时，想要图片居中显示，如果图片等比例缩小可能会导致图片不能填充整个p，如果直接将图片不设置宽高，将其外层p设置overflow:hidden；这时即使外层p设置了水平垂直居中，图片也不是居中的效果
解决方法：
1-把图片设置为背景图片
.face-img-contain{
width:348px;
height:436px;
margin:0auto;
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:1pxsolidgainsboro;
}
若是后台返回的地址，别忘了拼接方法正确
$("#face-img-back").css("background-image","url("+faceImg+")");
2-给图片设置相对p的100%的宽高，再设置object-fit:cover;
.face-img-contain-new-new{
width:348px;
height:436px;
margin:0auto;
margin-top:14px;
position:relative;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
border:1pxsolidgainsboro;
}
.face-img-defined1{
width:100%;
height:100%;
object-fit:cover;
}
读到这里，这篇“css实现图片大于div时的居中显示的方法”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网