Comment positionner une image sur une autre en HTML ?

Question

Je suis débutant en programmation Rails et j'essaie d'afficher de nombreuses images sur une page.Certaines images doivent être superposées à d'autres.Pour faire simple, disons que je veux un carré bleu, avec un carré rouge dans le coin supérieur droit du carré bleu (mais pas serré dans le coin).J'essaie d'éviter la composition (avec ImageMagick et similaire) en raison de problèmes de performances.

Je veux juste positionner les images qui se chevauchent les unes par rapport aux autres.

Comme exemple plus difficile, imaginez un compteur kilométrique placé à l’intérieur d’une image plus grande.Pour six chiffres, il me faudrait composer un million d'images différentes, ou tout faire à la volée, où il suffirait de placer les six images les unes sur les autres.

Answer 1

Ok, après un certain temps, voici ce sur quoi j'ai atterri :

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 70px;
}

<div class="parent">
  <img class="image1" src="https://placehold.it/50" />
  <img class="image2" src="https://placehold.it/100" />
</div>

Comme la solution la plus simple.C'est-à-dire:

Créez un div relatif qui est placé dans le flux de la page ;placez l'image de base en premier comme relative afin que le div sache quelle doit être sa taille ;placez les superpositions en absolu par rapport au coin supérieur gauche de la première image.L’astuce consiste à obtenir des valeurs relatives et absolues correctes.

Answer 2

Ceci est un aperçu simple de ce que j'ai fait pour faire flotter une image sur une autre.

img {
  position: absolute;
  top: 25px;
  left: 25px;
}
.imgA1 {
  z-index: 1;
}
.imgB1 {
  z-index: 3;
}

<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">

Source

Answer 3

Voici du code qui peut vous donner des idées :

<style>
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="">
<div>

JSFiddle

Je soupçonne que La solution d'Espo peut être gênant car cela nécessite de positionner les deux images de manière absolue.Vous souhaiterez peut-être que le premier se positionne dans le flux.

Habituellement, il existe un moyen naturel de le faire : CSS.Vous mettez la position :relatif sur l’élément conteneur, puis positionnez absolument les enfants à l’intérieur.Malheureusement, vous ne pouvez pas insérer une image dans une autre.C'est pourquoi j'avais besoin d'un conteneur div.Notez que j'en ai fait un flotteur pour qu'il s'adapte automatiquement à son contenu.Le faire afficher :inline-block devrait théoriquement fonctionner également, mais la prise en charge du navigateur y est médiocre.

MODIFIER:J'ai supprimé les attributs de taille des images pour mieux illustrer mon propos.Si vous souhaitez que l'image du conteneur ait ses tailles par défaut et que vous ne connaissez pas la taille à l'avance, vous ne pouvez pas utiliser l'option astuce de fond.Si vous le faites, c’est une meilleure façon de procéder.

Answer 4

Un problème que j'ai remarqué et qui pourrait provoquer des erreurs est que dans la réponse de Rrichter, le code ci-dessous :

<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>

devrait inclure les unités px dans le style, par exemple.

<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>

A part ça, la réponse a bien fonctionné.Merci.

Answer 5

Vous pouvez absolument positionner pseudo elements par rapport à leur élément parent.

Cela vous donne deux calques supplémentaires avec lesquels jouer pour chaque élément - donc positionner une image sur une autre devient facile - avec un balisage minimal et sémantique (pas de divs vides, etc.).

balisage :

<div class="overlap"></div>

css :

.overlap
{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: blue;
}
.overlap:after
{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 5px;
    background-color: red;
}

Voici un DÉMO EN DIRECT

Answer 6

Le moyen le plus simple de le faire est d'utiliser background-image puis de simplement mettre un <img> dans cet élément.

L’autre façon de procéder consiste à utiliser des couches CSS.Il existe une tonne de ressources disponibles pour vous aider, recherchez simplement couches CSS.

Answer 7

Style en ligne uniquement pour plus de clarté ici.Utilisez une vraie feuille de style CSS.

<!-- First, your background image is a DIV with a background 
     image style applied, not a IMG tag. -->
<div style="background-image:url(YourBackgroundImage);">
    <!-- Second, create a placeholder div to assist in positioning 
         the other images. This is relative to the background div. -->
    <div style="position: relative; left: 0; top: 0;">
        <!-- Now you can place your IMG tags, and position them relative 
             to the container we just made -->   
        <img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/>
    </div>
</div>

Answer 8

@buti-oxa :Je ne veux pas être pédant, mais votre code n'est pas valide.Le HTML width et height les attributs n'autorisent pas les unités ;vous pensez probablement au CSS width: et height: propriétés.Vous devez également fournir un type de contenu (text/css;voir le code d'Espo) avec le <style> étiqueter.

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40">
<div>

Sortie px; dans le width et height les attributs peuvent provoquer le blocage d'un moteur de rendu.

Answer 9

Il est peut-être un peu tard mais pour cela vous pouvez faire :

HTML

<!-- html -->
<div class="images-wrapper">
  <img src="images/1" alt="image 1" />
  <img src="images/2" alt="image 2" />
  <img src="images/3" alt="image 3" />
  <img src="images/4" alt="image 4" />
</div>

TOUPET

// In _extra.scss
$maxImagesNumber: 5;

.images-wrapper {
  img {
    position: absolute;
    padding: 5px;
    border: solid black 1px;
  }

  @for $i from $maxImagesNumber through 1 {
    :nth-child(#{ $i }) {
      z-index: #{ $maxImagesNumber - ($i - 1) };
      left: #{ ($i - 1) * 30 }px;
    }
  }
}