美文网首页
如何实现图片在div中保持长宽比且垂直水平居中

如何实现图片在div中保持长宽比且垂直水平居中

作者: JennTu | 来源:发表于2017-08-19 23:10 被阅读0次

    代码

    <!DOCTYPE html>
    <html><head><meta charset="UTF-8">
    <title>TEST IMG CENTER</title>
    </head>
    <style>
        img{
            width: auto;height: auto;max-width: 100%;max-height: 100%;
        }
        div{
            width:350px;height:280px;border: 4px black solid;
            display:flex;justify-content:center;align-items:center
        }
    </style>
    <body>
        <div>
            ![](iff2.PNG)
        </div>  
    </body>
    </html>
    

    参考文档

    相关文章

      网友评论

          本文标题:如何实现图片在div中保持长宽比且垂直水平居中

          本文链接:https://www.haomeiwen.com/subject/veexdxtx.html