1
votes

Centrer l'image dans un div relatif

J'ai un div relatif . Dans cette div, je voudrais centrer l'image (pour que le visage du chien soit visible). Comment puis-je faire cela?

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>


 <div class="relative h-24 overflow-hidden">
  <img class="absolute w-full h-auto" src="https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg" />
</div>

css tailwind-css

2 commentaires

Je supprimerais la balise img et utiliserais la propriété css background-image sur votre div "relatif" (comme ceci jsfiddle.net/mpgbd6fw )

comme l'image a une position absolue, vous pouvez utiliser top avec une valeur négative pour définir la position avec div, - codepen.io/ nagasai / stylo / arOpZJ

4 Réponses :

4
votes

Ajoutez ces styles à votre img

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>


 <div class="relative h-24 overflow-hidden">
  <img style="top: 50%; transform: translateY(-50%);" class="absolute w-full h-auto" src="https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg" />
</div>

top: 50%;
transform: translateY(-50%);

0 commentaires

2
votes

Il suffit de mettre le fichier CSS ou le style de l'image:

img {
    top: 50%;
    transform: translateY(-50%);
}

0 commentaires

2
votes

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>


 <div class="relative h-24 overflow-hidden">
 
</div>

div {
  background-image: url('https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg');
  background-repeat: no-repeat;
  /* background size makes it full width */
  background-size: cover;
  background-position: center;
}

Ceci utilise css pour mettre l'image à l'intérieur du div comme arrière-plan. C'est quelque chose que j'aime utiliser.

0 commentaires

0
votes

Pour obtenir le résultat attendu, utilisez top avec une valeur négative car la position de l'image est absolue

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>


 <div class="relative h-24 overflow-hidden">
  <img class="absolute w-full h-auto" src="https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg" />
</div>

div{
  position: relative;
}

img{
  position: absolute;
  top: -220px; 
}

0 commentaires