CSS граница больше чем картинка

Question

CSS граница больше чем картинка

Я пытаюсь выяснить, как я могу сделать рамку вокруг моей картинки больше, чем само изображение в CSS. Смотрите фотографии для примера:

Неправильная граница:

Черный круг с черным квадратом вокруг него. Коробка достаточно большая, чтобы круг мог поместиться.

Правильная граница:

Черный круг с черным квадратом вокруг него. Рамка больше, чем на предыдущем изображении, поэтому между кружком и рамкой вокруг него есть пустое пространство.

Я хочу, чтобы изображение было оригинального размера независимо от границы «размер».

0

border css image php

Решение

Другие решения

Вам нужно заполнить родительский элемент изображения, чтобы отодвинуть границу от изображения.

0

Вы можете поместить изображение в <div> и установить конкретные значения высоты и ширины для этого div. Затем добавьте границу в div вместо изображения.

0

Вам нужно использовать css padding для элемента изображения или его родителя для достижения желаемого эффекта. Увидеть эта ссылка для дополнительной информации.

0

Источник

Accepted Answer

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;

}

Вы можете изменить значение отступа, чтобы вы могли отрегулировать границу по отношению к изображению.

1