尺寸大小不固定图片在一个不固定大小的容器中保持原比例水平垂直居中

最新推荐文章于 2020-12-21 05:11:53 发布

大拿加拿大

最新推荐文章于 2020-12-21 05:11:53 发布

阅读量476

点赞数

本文链接：https://blog.csdn.net/zgrbsbf/article/details/107202890

版权

请注意，是图片居中，不是img标签居中，

<style>
        *{
            padding:0;
            margin:0;
        }
        body{
            width:100%;
            height: 100vh;
        }
        img{
            background: red;
            width:100%;
            height: 100%;
            /*object-position: calc(100% - 20px) calc(100% - 10px);*/
            object-position: 50% 50%;
            object-fit: contain;
        }
    </style>
</head>
<body>

<img src="./2020_0111_375c10a0j00q3x7j90014c000hs00eom.jpg"  crossorigin="anonymous" alt="">

在这里插入图片描述

https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大拿加拿大

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
尺寸大小不固定图片在一个不固定大小的容器中保持原比例水平垂直居中

请注意，是图片居中，不是img标签居中，<style> *{ padding:0; margin:0; } body{ width:100%; height: 100vh; } img{ background: red; width:100%; he
复制链接

扫一扫