css - box-sizing: "border-box" を使用し、画像の寸法を維持します

Question

画像に使用するbox-sizing: "border-box"と、ホバー時のように画像が小さくなります:例 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

答える必要がある質問は、画像自体を 200 ピクセルにするか、ボックス全体を 200 ピクセルにするかです。前の質問への回答に応じて、これをコーディングする 4 つの異なる方法があります...

ボックス全体の幅を 200px にしたい場合は、次のコードで border-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

私はあなたのjsfiddleを更新しました

CSS:

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

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