Ошибка CSS - границы вокруг изображения отображаются неправильно

Question

Я реализовал MP3-плеер JS с технологией XML, используя Bootstrap и JSON.Теперь, когда я реализовал это технологическое развертывание, появилась проблема с отображением границ вокруг изображений.Изображение перекрывает границу справа и снизу.Может ли эта проблема быть легко исправлена?Точную проблему можно увидеть здесь:

http://commonwealth.rastafarianreggae.com/rastaradio.php

Answer 1

Измените box-sizing на content-box для #audiostreamRasAkwamu и #rgStateSLIDER (DIV обертки вокруг IMG, у которого есть граница).

box-sizing: content-box;

Это изменит то, как ширинаи высота элемента вычисляются.

Например:

#audiostreamRasAkwamu, #rgStateSLIDER {
    box-sizing: content-box !important;
}

Кроме того, вы можете переместить CSS-правила "border" из #audiostreamRasAkwamu и #rgStateSLIDER в IMG.- или удалите правила width и height из оболочек.

Answer 2

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

height: 142px,
width: 163px

снимок экрана