单击图像时图像正在缩小答案

【问题标题】：Images are shrinking while click on them单击图像时图像正在缩小
【发布时间】：2017-01-29 16:14:09
【问题描述】：

我有一个简单的图像，我在单击时将 css 边框 3px 添加到图像，但问题是当我单击活动类时可以，但图像缩小了一点，看起来尺寸 id 不同，

图片看起来缩小了一点，但宽度和高度是一样的

我想在活动模式下保持 3px 边框的图像原样

   li img {
      cursor: pointer;
      border-radius: 4px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    }
    
     li .active img {
        border: 3px solid #01b9d1;
        border-radius: 6px;
        cursor: default;
    }
    .overview {
      width: 140px;
      height: 77px;
    }

    <div>
      <a>
        <img class="overview" src="imgsrc">
      </a>
    </div>

【问题讨论】：

标签： html css image

【解决方案1】：

使用大纲样式的 CSS 属性代替边框..
http://www.w3schools.com/css/css_outline.asp

【讨论】：

thx 它不工作 - 图像的大小是相同的，但看起来图像被缩小了一点

【解决方案2】：

在 img 元素上添加box-sizing: border-box。使用border-box 使宽度和高度属性（以及最小/最大属性）包括内容、填充和边框，请检查source。

例如

li img {
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

见fiddle

【讨论】：

嗨，它不起作用 - 图片的大小是一样的，但看起来图片被缩小了一点