CSS边框比图片大

Question

我试图找出如何使我的图片周围的边框比CSS中的图像更大。请参阅图片以获取示例：

错误的边框：

正确的边框：

我希望图像是独立于边框“尺寸”的原始尺寸。

Answer 1

JSFiddle

HTML：

<img src="http://www.langology.org/wp-content/uploads/2011/03/hello1.jpg"/>

CSS：

img{
border-color: black;
border-width: 5px;
border-style: solid;
padding: 5px;

}

您可以更改填充值，以便可以调整相对于图像的边框。

Answer 2

您需要在图像的父元素上填充以将边框推离图像。

Answer 3

您可以将图像放在<input class="make-switch" type="checkbox" data-on-text="<i class='fa fa-unlock'></i>" data-off-text="<i class='fa fa-lock'></i>"/> 中，并为该div设置特定的高度和宽度值。然后将边框添加到div而不是图像。

Answer 4

您需要在图像元素或其父级上使用css填充来实现所需的效果。有关详细信息，请参阅this link。