28188 sujets

CSS et mise en forme, CSS3

[Résolu] Un visage responsive dans un rond blanc

Bonjour,
Un visage responsive dans un rond blanc oui c'est enfantin ,juste je n'y arrives pas
Alors avis mes Amis aux champions Smiley cligne
Je part de ceci,

<!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: 0;} 
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 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 100px auto;
  border: 5px solid #ffffff;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  overflow: hidden;
}
img.lartiste {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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 {
    margin: 10px auto;
    border: 5px solid #ffffff;
    width: 120px;
    height: 120px;
  }
  img.lartiste {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
</head>
<body>

<div class="centre">
  <br /><br />
  <div class="lartiste">
    <img src="https://fox-infographie.com/imgxxx.jpg" class="lartiste">
  </div>
</div>
<br />

</body>
</html>


Merci d'avance !
C'est quoi le problème exactement ?

Dans le @media je vois que le max-width: 90%; fait apparaître des bandes de couleur de fond dans le rond autour du visage, à 100% cela ne le fait pas. C'est le seul truc qui me saute au yeux le reste fonctionne en réduisant la page ou en émulation sous FF et edge
Bonjour,
pour ce qui est du centrage de l'image sur le fond et sur la page, tout va bien ?
Mais que cherches-tu ? Que l'image s'agrandisse ou se rétrécisse suivant l'écran ?
Si c'est le cas, si tu veux que ton image suive les dimensions de l'écran, il faut mettre des % sur le width de div.lartiste. Pas besoin de height ici.
J'ai testé avec 50% pour les grandes largeurs et 40% pour les mobiles.
J'ai aussi testé avec un @media à (max-width: 480px) qui, je crois, correspond mieux aux mobiles. Mais c'est toi qui voit. Notamment sur les dimensions que j'ai donné à div.lartiste, qui sont là juste pour tester. Maintenant, ton image suit les dimensions de l'écran, surtout en mobile. Parce que pour les grandes largeurs, il faut à un moment arrêter de grossir l'image, la "pixélisation" va apparaître.
Mais je ne connais pas ton projet en entier, c'est toi qui voit.
Meilleure solution
Voici ma version finale parfaitement responsive !
Merci encore à vous.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Circle Image</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f9;
        }
        .image-container {
            width: 20vw; /* Utilisation des unités relatives pour une adaptabilité */
            height: 20vw;
            max-width: 150px; /* Taille maximale pour éviter un cercle trop grand */
            max-height: 150px;
            min-width: 80px; /* Taille minimale pour une lisibilité sur les petits écrans */
            min-height: 80px;
            border: 5px solid white;
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="https://fox-infographie.com/imgxxx.jpg" alt="Image circulaire responsive">
    </div>
</body>
</html>
Ton site est pourtant en français??
<html lang="en">

Ah non, je vois que sur le site original, tu as mis fr.
Modifié par Bongota (17 Jan 2025 - 12:04)
Prévenir un modérateur
Répondre au sujet
Aller à