图片居中

Posted 2020-10-20 Lulus

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片居中相关的知识，希望对你有一定的参考价值。

思路

借助div的background-size 的 cover这个属性等比例缩放图片
配合center就可以实现居中覆盖,裁剪多余
最终实现：等比例缩放+居中+完全覆盖+边界裁剪

div.full-img{
            background-size: cover;
            background: url("http://img4.duitang.com/uploads/item/201310/14/20131014172031_4sUms.jpeg") no-repeat center center;
            width: 80vw;
            height: 80vw;
        }

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <style>
        @keyframes rainbow {
            0% {
                background: steelblue;
            }
            100% {
                background: yellowgreen;
            }
        }

        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .full-screen {
            width: 100%;
            height: 100%;
            background: grey;
        }

        .center {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        div.center:hover {
            animation: 1s cubic-bezier(0.215, 0.610, 0.355, 1) rainbow infinite alternate-reverse forwards;
          }

        .large {
            height: 10rem;
            width: 10rem;
            background: ghostwhite;
        }

        a,
        a:link,
        a:visited {
            color: #444;
            text-decoration: none;
            transition: all 800ms cubic-bezier(0.215, 0.610, 0.355, 1)
        }

        .center:hover {
            color: blanchedalmond;
        }

        .center::before {
            position: absolute;
            content: "\5B";
            left: 0rem;
            opacity: 0;
        }

        .center:hover::before {
            position: absolute;
            content: "\5B";
            left: -1rem;
            opacity: 1;
            transition: all 800ms cubic-bezier(0.215, 0.610, 0.355, 1)
        }

        .center::after {
            position: absolute;
            content: "\5d";
            right: 0rem;
            opacity: 0;
        }

        .center:hover::after {
            position: absolute;
            content: "\5D";
            right: -1rem;
            opacity: 1;
            transition: all 800ms cubic-bezier(0.215, 0.610, 0.355, 1)
        }

        div.full-img{
            background-size: cover;
            background: url("http://img4.duitang.com/uploads/item/201310/14/20131014172031_4sUms.jpeg") no-repeat center center;
            width: 80vw;
            height: 80vw;
        }
    </style>
    <div class="full-screen">
        <div class="center full-img">
        </div>
    </div>
</body>

</html>

以上是关于图片居中的主要内容，如果未能解决你的问题，请参考以下文章

CSS代码片段

居中对齐(V & H)一个div和一个img在父div内？