使用箱尺寸：“边界框”，并保持图像尺寸

Question

如果我使用box-sizing: "border-box"为图像图像会变得越来越小，像悬停：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 +使用。

解决方案＃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点不同的方式取决于你的回答前面的问题编写这...

如果你想整个箱体是200像素宽，那么你可以使用边界框下面的代码...

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

如果你想整个箱体是200像素宽，那么你也可以使用此代码...

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

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

如果你想图像本身是200像素，那么你需要这个代码...（这意味着你的总框的宽度实际上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

我更新了jsfiddle

CSS：

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

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