Wie fügt man einen festgelegten Randradius hinzu?

Question

Ich sah im Internet und sah einen Beitrag über die img und das Zitat zu ändern jedes Mal, wenn die Seite aktualisiert wird und es war auf Stack-Überlauf Hier ist der Code dazu, Kredit geht an den ursprünglichen Entwickler, aber ich einfach will wissen, wo ich die Klasse img-Kreis hinzufügen kann, so dass es in CSS funktionieren würde die kreisförmige Grenze für die Bilder zu haben, sorry dies ist mein erster Beitrag in Stackoverflow

(function() { 
    var quotes = [ 
    { 
     text: "text1", 
     img: "http://i.stack.imgur.com/FqBE6.jpg?s=32&g=1" 
    }, 
    { 
     text: "text2", 
     img: "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG", 
    } 
    ]; 
    var quote = quotes[Math.floor(Math.random() * quotes.length)]; 
    document.getElementById("quote").innerHTML = 
    '<p>' + quote.text + '</p>' + 
    '<img src="' + quote.img + '">'; 
})(); 

Answer 1

fügen sie einfach es zu img code:

'<img class="img-circle" src="' + quote.img + '">'; 

Voll Code:

(function() { 
    var quotes = [ 
    { 
     text: "text1", 
     img: "http://i.stack.imgur.com/FqBE6.jpg?s=32&g=1" 
    }, 
    { 
     text: "text2", 
     img: "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG", 
    } 
    ]; 
    var quote = quotes[Math.floor(Math.random() * quotes.length)]; 

    document.getElementById("quote").innerHTML = 
    '<p>' + quote.text + '</p>' + 
    '<img class="img-circle" src="' + quote.img + '">'; 
})(); 

Hoffnung, das hilft.

(function() { 
 
    var quotes = [ 
 
    { 
 
     text: "text1", 
 
     img: "http://i.stack.imgur.com/FqBE6.jpg?s=32&g=1" 
 
    }, 
 
    { 
 
     text: "text2", 
 
     img: "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG", 
 
    } 
 
    ]; 
 
    var quote = quotes[Math.floor(Math.random() * quotes.length)]; 
 

 
    document.getElementById("quote").innerHTML = 
 
    '<p>' + quote.text + '</p>' + 
 
    '<img class="img-circle" src="' + quote.img + '">'; 
 
})();

.img-circle{ 
 
    border-radius: 50%; 
 
}

<div id="quote"></div>

Answer 2

ein style-Attribut innerhalb des img-Tag mit einem Satz border-radius hinzufügen.

'<img src="' + quote.img + '" style="border-radius: 100%;">'; 

Answer 3

die Klassennamen in Ihrem HTML-Tag hinzufügen, selbst wie class="circle-image"

(function() { 
 
    var quotes = [ 
 
    { 
 
     text: "text1", 
 
     img: "http://i.stack.imgur.com/FqBE6.jpg?s=32&g=1" 
 
    }, 
 
    { 
 
     text: "text2", 
 
     img: "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG", 
 
    } 
 
    ]; 
 
    var quote = quotes[Math.floor(Math.random() * quotes.length)]; 
 
    document.getElementById("quote").innerHTML = 
 
    '<p>' + quote.text + '</p>' + 
 
    '<img src="' + quote.img + '" class="circle-image">'; 
 
})();

.circle-image{ 
 
    border-radius:50%; 
 
}

<div id="quote"></div>