使用box-sizing："border-box“并保持图像尺寸不变

Question

如果我对图像使用box-sizing: "border-box"，图像将变得更小，就像在hover：Example JsFiddle上一样

有没有可能在不裁剪图像的情况下达到同样的效果？

Answer 1

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

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

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

此外，由于IE不理解此属性，因此您可以将box-sizing留给IE8+使用。

使用div作为包装器的解决方案#2 + :after

<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/

Answer 2

你需要回答的问题是，你希望图像本身是200px，还是整个盒子都是200px。根据你对上一个问题的回答，有4种不同的编码方式……

如果您希望整个框的宽度为200px，则可以通过以下代码使用- box ...

http://jsfiddle.net/BPRyZ/8/

img {
    width:200px;
    border: transparent 10px solid;
    box-sizing:border-box;
}

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

如果你想要整个盒子有200px宽，那么你也可以使用下面的代码...

img {
    width:180px;
    border: transparent 10px solid;
}

img:hover{
    border:solid 10px #f80;
}

如果你想要图像本身是200px，那么你需要这个代码...(这意味着你的盒子总宽度实际上是220px)

img {
    width:220px;
    border: transparent 10px solid;
    box-sizing:border-box;
}

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

对于上面的，您还可以使用...

img {
    width:200px;
    border: transparent 10px solid;
}

img:hover{
    border:solid 10px #f80;
}

Answer 3

我更新了你的

CSS：

img {
    width:200px;
    border: transparent 10px solid;
}

img:hover{
    box-sizing:border-box;
    border:solid 10px #f80;
    width:220px;
}