使用箱尺寸：「邊界框」，並保持圖像尺寸

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