Как добавить фэнтезийный фрейм для img, если вы знаете только его ширину?

Question

У меня есть небольшая игра, где лидеры предыдущей и текущей недели являются шоу в 3-одноклеточного HTML таблицы в нижней части:

изменить размер обоих Fotos по жестко прописывать их ширину до 120 в HTML:

<td><img src="avatar1.jpg" width="120"></td> 

Я хотел бы спросить мой парень графиков рисовать смешные кадры из мультфильма - поставить вокруг этих 2 Fotos. Но я не знаю, как разместить их технически и какие активы он должен нарисовать для меня.

Как справиться с этим в CSS или HTML? Могу ли я (ab) использовать здесь td?

Answer 1

Это может быть работа для CSS3 границы образа. См. http://www.css3.info/preview/border-image/ для подробного руководства и http://caniuse.com/#feat=border-image для совместимости браузеров.

Answer 2

Я предлагаю создать раму так, чтобы она позволяла вариант width и height. Нарежьте изображение так, чтобы вы могли повторять верхний, правый, нижний и левый фон и отображать углы в своих собственных элементах div.

Я бы посоветовал установить по умолчанию height и width для ваших изображений, поскольку они могут казаться искаженными. Вы можете указать ширину max, чтобы они не взорвали ваши ячейки.

Чтобы установить max-width, выполните следующие действия:

img { max-width: 120px; } 

Answer 3

Уходя ответ Саймона, вы можете использовать следующее правило CSS:

​img[width="120px"] { 
    border: 10px solid red; 
    /* border-image: url(border.png) 27 27 27 27 round round; */ 
}​ 

Пока img имеет width набор для 120px, это будет соответствовать и получить границу.