Visualizzare informazioni extra sulla foto

[blackskyisback]

Salve a tutti

Quello che vorrei ottenere e visualizzare le informazioni di un campo su un altro,

esempio la bandiera della nazione sulla foto (per adesso)



il campo della foto e' foto varchar 100, la foto e' in una cartella

il campo per la bandiera e' nationality varchar 250,sempre in una cartella, in questo ci possono anche essere diverse nazioni, tutte separate da una virgola (e con un codice in php viene creato l'array)
esempio:
Italia, America, Russia ecc,

come fare?

[GraphOGLRisorse]

Questo è un esempio di per la gestione lato html e css:

<style>
#container {
  width: 100px;
  height: 100px;
  position: relative;
}
#foto,
#bandiera {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

* {
  box-sizing: border-box;
}
.column {
  float: left;
  width: 20%;
  padding: 10px;
}
.row:after {
  content: "";
  display: table; 
  clear: both;
}
</style>

<div id="container">
  <div id="foto">
  <img src="foto.bmp" height="200" width="320"></div>
  <div id="bandiera">
     <div class='row'>   
        <div class='column'>
           <img src="bandiera1.png" height="20" width="32">
        </div>
        <div class='column'>
           ,
        </div>    
        <div class='column'>
           <img src="bandiera2.png" height="20" width="32">
        </div>    
        <div class='column'>
           ,
        </div>
        <div class='column'>
           <img src="bandiera3.png" height="20" width="32">
        </div>		
     </div>   
  </div>
</div>

ho messo 3 esempi di bandiere per far capire meglio la struttra.

Ovviamente poi per integrarlo in php, adrà inserito un ciclo all'interno del div <div class='row'></div>. Metre all'interno del ciclo ci sarà:

        <div class='column'>
           <img src="" height="20" width="32">
        </div>   

Cordiali saluti.

[blackskyisback]

appena ho un po' di tempo lo testo

grazie

[blackskyisback]

ho adattato il tutto al mio codice php, funziona

pero' vorrei la foto centrata all'angolo a sinistra in alto e piu' piccola

[GraphOGLRisorse]

E' possibile fare il centraggio orizzontale e veriticale o entrmbi, sempicemnte usando i flexbox. Facendo riferimento all'esempio precendete, basta aggiugere questo codice:

<style>
.Centraggio {
  display: flex;
  justify-content: center; // orizzontale
  //align-items: center;  // verticale
  background-color: #CCCCCC;
  width: 500px;
  height: 500px;    
}
.Centraggio > div {
  background-color: #FF6600;
  margin: 10px;
}
</style>

<div class="Centraggio">
  <div id="container">
  ..............................
  resto del contenuto con foto e bandiere sovrapposte
  ..............................
  </div>
</div>

L'id conteier dovrà avere le stesse dimensioni della foto altrimenti non verra centrato.

Sempre in riferimento all'esempio inziale, per ridimensionare le bandiere, basta separare le rispettive classi e dargli dei valori differenti:

#foto {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
#bandiera {
  width: 70%;
  height: 70%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

Cordiali saluti.

[blackskyisback]

sempre gentile e disponibile GraphOGLRisorse,
Grazie