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

如果您希望整个广告框的宽度为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;
}

使用box-sizing：“border-box”并保持图像尺寸

3 个答案: