我们可以在不调整大小的情况下对图像使用缩放比例吗？

Zeinab 发表于 Dev

109

Zeinab

我想在每次悬停时使用缩放功能来放大一些相同大小的图像（此处为3），并且遇到了一个事实，尽管我已经将我的图像3放在3个特定的divs中，并用相同的填充物将它们分开彼此之间，将鼠标悬停在每个图像上时，将调整图像的大小并在其填充上级联。

我需要的是将图像放大，而无需将其调整大小并在悬停时叠加在其填充上。我会很高兴为这个问题提供任何建议的解决方案。

这是我的HTML：

*,
*::before,
*::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container{
    position: relative;
    width: 33.33334%;
    height: 300px;
/*        border: 1px solid #000;*/
    float: right;
    padding: 0 8px 0 0;
    overflow: hidden;
}
.container::after{
    position: absolute;
    top: 100%;
    left: 0;
    content:"";
    width: calc(100% - 8px);
    height: 100%;
    background-color: rgba(0,0,0,0.55);
    padding: 0 8px 0 0px;
}
.container:hover::after{
    top: 0;
}
.container:nth-child(1){
    padding-right: 0;
}
.container img{
    width: 100%;
    height: 100%; 
    transition: 200ms;
    padding: 0 8px 0 0;
}
.container:hover img{
    transform: scale(1.3);
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
    <div class="container"> <img src="https://via.placeholder.com/300/f00" alt=""> </div>
    <div class="container"> <img src="https://via.placeholder.com/300/0f0" alt=""> </div>
    <div class="container"> <img src="https://via.placeholder.com/300/00f" alt=""> </div>
</body>
</html>

海沃氏

如果我理解正确，那么需要对图像进行缩放，但要保持在其div内-不要渗出填充区域。

如果在容器上使用边距而不是在图像上使用填充，则img会稍微缩放，但会停留在其元素之内。

注意：您可能想考虑对象适合度：在图像上包含或覆盖而不是100％的宽度/高度，因此它不会失真，而是取决于您的使用情况。

*,
    *::before,
    *::after{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .container{
        position: relative;
        width: calc(33.33334% - 8px);
        height: 300px;
/*        border: 1px solid #000;*/
        float: right;
        overflow: hidden;
        margin: 0 8px 0 0;
    }
    .container::after{
        position: absolute;
        top: 100%;
        left: 0;
        content:"";
        width: 100%
        height: 100%;
        background-color: rgba(0,0,0,0.55);
    }
    .container:hover::after{
        top: 0;
    }
    .container:nth-child(1){
        margin-right: 0;
    }
    .container img{
        width: 100%;
        height: 100%;
        transition: 200ms;
    }
    .container:hover img{
        transform: scale(1.3);
    }

<div class="container"> <img src="https://i.stack.imgur.com/gWzPe.jpg" alt=""> </div>
    <div class="container"> <img src="https://i.stack.imgur.com/gWzPe.jpg.jpg" alt=""> </div>
    <div class="container"> <img src="https://i.stack.imgur.com/gWzPe.jpg" alt=""> </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。