css - 使用 box-sizing: "border-box" 并保持图像尺寸

Question

如果我使用box-sizing: "border-box"图像图像会变小，就像悬停一样：示例 JsFiddle

是否可以在不裁剪图像的情况下达到相同的效果？

Answer 1

解决方案 #1大纲属性。尝试使用等于轮廓宽度的负轮廓偏移outline值代替边框：

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

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

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

解决方案#2使用 div 作为包装器 + :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 宽，那么您可以使用带有以下代码的边框框...

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;
}

如果您希望图像本身为 200 像素，那么您需要此代码...（这意味着您的总框宽度实际上是 220 像素）

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

我更新了你的jsfiddle

CSS：

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

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