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

Question

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

Я изменяю размеры обеих фотографий, жестко кодируя их ширину до 120 в HTML:

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

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

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

Answer 1

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

Answer 2

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

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

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

Answer 3

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

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

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

img { max-width: 120px; }