Je souhaite afficher des images dans un conteneur avec un arrière-plan coloré.

Je veux que l'arrière-plan du conteneur soit arrondi et que l'image soit placée au centre.

De plus, il y a un espace entre la bordure de l'arrière-plan et l'image.

Tel est le but:

img

Le code jusqu'à présent:

.circle{
    border-radius: 50%;
    background: #2e374f;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    display: table-cell;
    vertical-align: middle;
}

.title{
    color: #ffffff;
    font-size: 10px;
    text-align: center;
    margin-top: 5px;
    opacity: 0.5;
}
<div class="circle">
    <img src="https://www.fillmurray.com/50/50" class="mx-auto d-block">
    <div class="title">
        TITLE
    </div>
</div>

C'est ce que j'ai réalisé jusqu'à présent:

img

1
Zacharias Hendrik 23 oct. 2020 à 09:41

3 réponses

Meilleure réponse

Vous devez supprimer la règle display: table-cell et en plus vous pouvez réduire l'image.

.circle{
    border-radius: 50%;
    background: #2e374f;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 150px;
    width: 150px;
}

.title{
    color: #ffffff;
    font-size: 10px;
    text-align: center;
    margin-top: 5px;
    opacity: 0.5;
}

.img {
  max-width: 50%;
  max-height: 50%;
}
<div class="circle">
    <img src="https://picsum.photos/100/100?grayscale" class="mx-auto d-block img">
    <div class="title">
        TITLE
    </div>
</div>
0
Anzor Asadov 23 oct. 2020 à 07:10

Vérifiez s'il vous plaît.

.container-box { 
  width: 400px;
  height: 400px;
  background-color: black;
  
}

.container-circle {
  
  display:inline-block;
  margin: 50px;
  width: 300px;
  height: 300px;
  border-radius: 150px;
  background-color: gray;
}

.image {
  background: url(https://upload.wikimedia.org/wikipedia/commons/c/ce/Font_Awesome_5_solid_arrow-circle-right.svg);
  width: 100px;
  height: 100px;
 display: inline-block;
  margin: 100px;
}
<div class="container-box">
  <div class="container-circle">
    <div class="image">
      
    </div>
    
  </div>
</div>

"

0
Tatjana Žunić 23 oct. 2020 à 07:07

Si je vois bien, vous voulez que l'image soit ronde et non le conteneur. Dans ce cas, cela devrait vous aider:

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

.circle{
    background: #2e374f;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    height:100px;
    width: 100px;
}

.title{
    color: #ffffff;
    font-size: 10px;
    text-align: center;
    margin-top: 5px;
    opacity: 0.5;
}
<div class="circle">
    <img src="https://www.fillmurray.com/50/50" class="mx-auto d-block">
    <div class="title">
        TITLE
    </div>
</div>
0
cloned 23 oct. 2020 à 07:12