Css 使用框大小：“框大小”；边框框“；并保持图像尺寸

如果我对图像使用

框大小：“边框框”

，图像将变小，如悬停：

---

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

您需要回答的问题是，您希望图像本身是200px，还是整个盒子是200px。根据您对上一个问题的回答，有4种不同的编码方式

如果希望整个框的宽度为200px，则可以使用带有以下代码的边框框…

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

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

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

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

如果您希望整个盒子的宽度为200px，那么您也可以使用此代码…

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

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

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

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

如果希望图像本身为200px，则需要以下代码。。。（这意味着您的盒子总宽度实际上是220px）

对于上述内容，您也可以使用…

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

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

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

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

解决方案#1概述属性。尝试使用

轮廓

而不是轮廓宽度为负值的边框：

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

此外，由于IE不了解此属性，您可以将

框大小调整

留给IE8+使用

解决方案#2使用div作为包装器+

：在

之后：

<div class="img-wrap">
    <img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" class="img1" />
</div>

我更新了你的

CSS:

---

只使用一个

元素，不。你必须使用

背景大小的组合，等等。嗨，我不想让图像“变小”或改变它在文档上的位置谢谢，但是我在屏幕上抓取图像，我没有太多的控制权，在大多数情况下，我不想把它改成使用
border:transparent 10px solid。已为此搜索了数小时。