如何防止CSS3的圆角Box图像溢出

2021.07.27 2,404 0

在做项目的时候,使用了css3图片放大功能,即:transform:scale(1, 1)。父元素已经设置了overflow:hidden剪切,但在苹果手机端和Safari浏览器,图片并未实现剪切。

看代码:

.pics {
    width         : 200px;
    height        : 150px;
    position      : relative;
    overflow      : hidden;
    border-radius : 10px;
}
.pics img {
    height    : 100%;
    max-width : initial !important;
    display   : block;
    position  : absolute;
    left      : 50%;
    top       : 50%;
    transition: .3s;
    transform : scale(1, 1) translate3d(-50%, -50%, 0);
}
.pics:hover img {
    transform: scale(1.1, 1.1) translate3d(-45.5%, -45.5%, 0);
}

以上代码,在电脑端Chrome浏览器完全没问题,来,用手机看看效果,圆角不见啦。但在Safari浏览器下,就出现了问题,大家可以试试



解决办法

在父元素上加上:transform:rotate(0deg);

.pics {
    width            : 200px;
    height           : 150px;
    position         : relative;
    overflow         : hidden;
    border-radius    : 10px;
    -webkit-transform: rotate(0deg);
    -moz-transform   : rotate(0deg);
    -ms-transform    : rotate(0deg);
    -o-transform     : rotate(0deg);
    transform        : rotate(0deg);
}


请用手机看效果,是不是正常啦



400

全部评论 0


    抢沙发