css实现图片大于div时的居中显示的方法

本文小编为大家详细介绍“CSS实现图片大于div时的居中显示的方法”，内容详细，步骤清晰，细节处理妥当，希望这篇“css实现图片大于div时的居中显示的方法”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

    当图片大于p时，想要图片居中显示，如果图片等比例缩小可能会导致图片不能填充整个p，如果直接将图片不设置宽高，将其外层p设置overflow:hidden；这时即使外层p设置了水平垂直居中，图片也不是居中的效果

    解决方法：

    1-把图片设置为背景图片

    <divclass="face-img-contain"id="face-img-back">

    </div>

    .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;

    <divclass="face-img-contain-new-new">

    <imgsrc="../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: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时的居中显示的方法”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网node.js频道。