div下面有img,默认border: 2px solid transparent;hover变色的时候，图片会抖动一下

问题

需求：默认border: 2px solid transparent;hover变色

如何不让图片的div抖动(变大)
第一个会抖，第二个不会，不知道为什么，难道是图片色

抖动

代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 100%;
            width: 100%;
            display: flex;
            background-color: #f5f5f5;
            padding-top: 20px;
            padding-left: 20px;
        }

        .box-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 190px;
            height: 240px;
            box-sizing: border-box;
            border: 2px solid transparent;
            margin-right: 20px;
            margin-bottom: 20px;
            font-size: 0;
        }

        .box-item:hover {
            border: 2px solid blue;
        }

        img {
            width: 186px;
            height: 236px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box-item">
            <img src="https://jingyu-social-test.oss-cn-shenzhen.aliyuncs.com/avg/library/asset/1616381894/605807c6b3a8e/preview.png"
                alt="">
        </div>
        <div class="box-item">
            <img src='https://jingyu-social-test.oss-cn-shenzhen.aliyuncs.com/avg/library/asset/1614937027/6041fbc358b7d/preview.png'
                alt="">
        </div>
    </div>
</body>

</html>

阅读 4.1k

div下面有img,默认border: 2px solid transparent;hover变色的时候，图片会抖动一下

问题

抖动

代码

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？