Bootstrap 3: .img-circle auf Android (Chrome)

[Fallwrrk]

Mojn zsamm!

Ich bin eigentlich PHP-, kein Frontend-Entwickler, deshalb tue ich mich gerade etwas schwer mit der Klasse "img-circle" mit Bootstrap 3.3.2. Und zwar habe ich ein kleines Bildchen, welches ich mir mit Hilfe dieser Klasse gerne rund machen würde + Padding um das Bild + Border um das Bild. Der Code sieht folgendermaßen aus:

HTML:

<div id="profile-avatar" class="row text-center">
    <div class="col-xs-12 col-sm-12 col-md-12 col-md-12">
        <img src="<?php echo $this->basePath('img/avatar.png') ?>" alt="profile_avatar_altAttr" class="img-circle">
    </div>
</div>

CSS:

#profile-avatar > div > img {
    padding: 2px;
    margin: 36px 0 12px 0;
    border: 2px solid #808080;
}

Auf dem Desktop wird das Ding perfekt angezeigt. Auf meinen OnePlus One wird jedoch unter Chrome 40 nur ein ganz normales viereckiges Bild angezeigt und auch der Border ist nicht vorhanden. Auf dem gleichen Gerät habe ich mit dem Firefox keinerlei Probleme. Das gleiche Bild mit der Klasse "img-rounded" statt "img-circle" funktioniert einwandfrei.

Hatte das schon mal jemand und hat eventuell eine Lösung parat?

mfg Marcel

 

[ofhouse]

img-Tags können Chrome/Opera in älteren Versionen leider nicht abrunden, Version 40 sollte aber das aber eig schon können?

Abhilfe kannst du dir schaffen, indem du den div, der um deinen img-Tag liegt,
Wie das geht, gibt es hier ein Beispiel zu: html - How to make CSS3 rounded corners hide overflow in Chrome/Opera - Stack Overflow

Hab dir mal nen Fiddle zusammengebastelt, so sollte das gehen: Edit fiddle - JSFiddle

 

[Fallwrrk]

Tatsächlich, das funktioniert perfekt. Danke dir!

Dass ältere Chrome-Versionen das nicht konnte habe ich gelesen. Hatte allerdings Chrome 40 auf dem Smartphone, deswegen wunderte es mich, dass das nicht funktioniert.

mfg Marcel