CSS граница больше чем картинка
Я пытаюсь выяснить, как я могу сделать рамку вокруг моей картинки больше, чем само изображение в CSS. Смотрите фотографии для примера:
Неправильная граница:
Правильная граница:
Я хочу, чтобы изображение было оригинального размера независимо от границы «размер».
Решение
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;
}
Вы можете изменить значение отступа, чтобы вы могли отрегулировать границу по отношению к изображению.
Другие решения
Вам нужно заполнить родительский элемент изображения, чтобы отодвинуть границу от изображения.
Вы можете поместить изображение в <div> и установить конкретные значения высоты и ширины для этого div. Затем добавьте границу в div вместо изображения.
Вам нужно использовать css padding для элемента изображения или его родителя для достижения желаемого эффекта. Увидеть эта ссылка для дополнительной информации.