0
votes

Image chevauchant un div

Je veux faire comme ça: Voir l'image

Ici, le cercle est une image. P>

J'ai essayé ça. Mais quand je redimensionniste la taille de la fenêtre, le cercle de l'image change change sa postion. Comment puis-je résoudre ce problème? P>

<div class="main">
    <img src=''>
    <div>Text Text Text</div>
</div>


.main {       
        background-color: #fbd449;
        border-radius: 4.5px;
        padding: 0.5rem 3rem;
        position: relative;
        margin-left: 9rem;
}

img {
        position: absolute;
        background-color: chocolate;
        width: 9rem;
        height: 9rem;
        top: -12%;
        border-radius: 50%;
        left: -20%;
}

html css position

1 commentaires

Désolé, je n'ai pas pu télécharger l'image correctement car je suis un nouvel utilisateur.

3 Réponses :

0
votes

Si vous le souhaitez en position fixe à tout moment, utilisez probablement%% n'est pas la meilleure idée. Copiez et collez le code ci-dessous au lieu de votre CSS et voyez si cela vous aide. Ce n'est pas une réplique exacte de votre image partagée, mais vous pouvez jouer avec des tailles correctes et un positionnement pour le faire droit pour votre site.

.main { 
  background-color: #fbd449;
  border-radius: 4.5px;
  padding: 0.5rem 3rem;
  position: relative;
  margin-left: 9rem;
  width:12rem;
  height: 3rem;
}

img {
  position: absolute;
  background-color: chocolate;
  width: 7rem;
  height: 7rem;
  margin-left:-4rem;
  margin-top:-2rem;
  border-radius: 50%;
}

.main > div {
  padding-left:4rem
}

2 commentaires

Pour principal, vous avez donné à la fois relatif et absolu

Merci pour la tête Sajgkh! Vient de modifier mon code pour le corriger.

0
votes

Voici une solution que vous recherchez ..

Si vous utilisez % code>, la sortie sera différente dans l'appareil mobile. p>

en classe .Main code> et img code> Vous pouvez modifier la hauteur et la largeur selon votre choix p>

p>



<div class="main">
  <img src=''>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

1 commentaires

@sajgkh Becasue Pourcentage n'est pas une bonne idée surtout qu'elle est utilisée pour la conception réactive, mais vous utilisez ici la position de la propriété CSS fixe également, vous pouvez également le savoir d'ici Stackoverflow.com/questions/31728022/... .

0
votes

a fait quelques modifications apportées à la CSS

.main {       
        background-color: #fbd449;
        border-radius: 4.5px;
        padding: 0.5rem 5rem 0.5rem 9rem;
        position: relative;
        margin:2rem 9rem 0;
        width:100%;
        height:7rem;
        border-radius:10px;
        box-sizing:border-box;
}

img {
        position: absolute;
        background-color: chocolate;
        width: 9rem;
        height: 9rem;
        top: -1rem;
        border-radius: 50%;
        left: -1.5rem;
}

0 commentaires