css – 使用box-sizing：“border-box”并保持图像尺寸

如果我使用box-sizing：图像的“border-box”图像将变小,例如悬停： Example JsFiddle

是否可以在没有图像裁剪的情况下执行相同的效果？

解决方案#1大纲属性.尝试使用轮廓而不是边框​​,负 outline-offset值等于轮廓宽度：

img:hover {
    box-sizing:border-box;
    outline: solid 10px #f80;
    outline-offset: -10px;
}

http://jsfiddle.net/dfsq/BPRyZ/2/

此外,由于IE不了解此属性,您可以将盒子大小调整为IE8使用.

解决方案#2使用div作为包装器：之后：

<div class="img-wrap">
    <img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" class="img1" />
</div>

CSS：

.img-wrap:after {
    border: 0;
}
.img-wrap:hover:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: solid 10px #f80;
}

http://jsfiddle.net/dfsq/BPRyZ/7/