在悬停图像边框宽度大于其他列边框宽度

Question

我希望这就像响应式布局中的图像

我已经尝试但是它不起作用，因为当我增加一个元素的边框时，增加的大小会影响下面的图像，并且网格布局不再符合设计。

.list_item{
  margin: 0px 0px;
  padding: 0px 0px;
  list-style: none;
}

.list_item li{
  margin-bottom: 10px;
  padding-left: 14px;
  padding-right: 14px;
}

.list_item li{
  float: left;
  margin-bottom: 20px;
  margin-top: 7px;
  padding-left: 20px;
  padding-right: 20px;
  width: 33.3333%;
}
.list_item > li img {
height: 137px;
width: 259px;
}
.list_item li:hover .list_img{
  border: 5px solid red;
  height: 147px;
  width: 269px;
}

.list_item > li .list_img{
  border: 3px solid red;
  height: 143px;
  width: 265px;
background:blue;
}

<ul class="list_item">
  <li>
    <div class="list_img">
      <img src="images/1.jpg">
    </div>
  </li>
  <li class="list_select">
    <div class="list_img">
      <img src="images/2.jpg">
    </div>
  </li>
  <li>
    <div class="list_img">
      <img src="images/2.jpg">
    </div>
  </li>
</ul>

Answer 1

对可能有边框的元素使用NodeBuilderWithNameAndFile，但您希望将其计算为box-sizing: border-box;的一部分，而不是添加到其中

http://www.paulirish.com/2012/box-sizing-border-box-ftw/（陈旧但是金色）

width