Bonjour les Ami(e)s 
Voila longtemps que je suis absent ,mais me voila avec ce problème qui devait être simple dans ma tête, et pourtant malgré ma soi-disant grande expérience je n'arrives pas à conserver la cohérence entre le rond blanc et l'image .
Voici mon HTML et un morceau du CSS inclus.
désolé j'ai laissé beaucoup de CSS au cas ou des lignes joueraient les perturbation ! excusez donc... ET MERCI D'AVANCE.
Voila longtemps que je suis absent ,mais me voila avec ce problème qui devait être simple dans ma tête, et pourtant malgré ma soi-disant grande expérience je n'arrives pas à conserver la cohérence entre le rond blanc et l'image .
Voici mon HTML et un morceau du CSS inclus.
désolé j'ai laissé beaucoup de CSS au cas ou des lignes joueraient les perturbation ! excusez donc... ET MERCI D'AVANCE.
<!DOCTYPE html><html lang='fr'><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin :0; padding :0; }
fieldset, img { border :0;margin: 0px 0px 0px 0px;}
address, caption, cite, dfn, em, strong, th, var { font-style :normal; font-weight :normal; }
ol, ul { list-style :none; }
caption, th { text-align :left; }
h1, h2, h3, h4, h5, h6 { font-size :100%; font-weight :normal; }
/* =================fin du raz================= */
html, body { height: 100%; }
body { background-color:#577bac;font-family:"Times New Roman", Times, serif;color:#feffff; font-size:22px;margin:0;border:0;text-align: center;}
* {box-sizing: border-box;}
div.lartiste {float:left;margin:100px;border:5px solid #ffffff;width: 210px;height: 210px;border-radius: 50%;overflow:hidden;}
img.lartiste { width: inherit;height: inherit;border-radius: inherit;}
border-bottom : 1px solid #ffffff;border-left : 1px solid #ffffff;border-top : 1px solid #ffffff;border-right : 1px solid #ffffff;
div.centre{height:auto;width:auto;max-width:900px;margin:auto;text-align:center;}
@media (max-width:750px){
body, element1, element2 {width:auto;margin : 0;}
img,blockquote, pre, textarea, input, iframe, object, embed, video {max-width:90%; height: auto;}
pre, samp {overflow-wrap: anywhere;}
div.lartiste {float:left;margin:10px;border:5px solid #ffffff;width: 120px;height: 120px;border-radius: 50%;overflow:hidden;}
img.lartiste { height: auto;width: 170px;margin: auto;}
}
</style>
</head><body>
<div class="centre" >
<br /><br />
<div class="lartiste"><img src="https://fox-infographie.com/logos/cecile-gillaerts00.jpg" class="lartiste">
</div></div>
<br />
</body></html>