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

发布时间:2022-03-03 17:43:50 作者:iii
来源:亿速云 阅读:340

本文小编为大家详细介绍“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时的居中显示的方法”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. css实现网站上图片上下居中显示
  2. css怎么实现图片大于div时的居中显示

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:CSS中import与link有哪些区别

下一篇:CSS样式集实例分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》