[javascript] modifica codice

Ciao,
Ho questo codice:

Citazione:

---

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "http://ip-api.com/json";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var obj = JSON.parse(xmlhttp.responseText);
$("#codice_nazione").html( obj.countryCode);
var percorso = "http://gutguy2.altervista.org/ip/bandiere/";
percorso = percorso + obj.countryCode + ".png";
$("#bandiera").css("background-image","url('"+percorso+"')");
document.getElementById("citta").innerHTML =
obj.city + ",&nbsp;" + obj.regionName + ",&nbsp;" +obj.country;
document.getElementById("visitorisp").innerHTML =
obj.org;
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
</script>
<style>
#bandiera{
width:128px;height:64px;
background-repeat:no-repeat;
}
</style>

---

in pratica mi posta una bandiera, tipo http://gutguy2.altervista.org/ip/bandiere/QA.png, ora come faccio a fare in modo che la bandiera venga postata con un bordo nero? infatti come vedete essendo il bg bianco, non si percepisce bene la bandiera...

inoltre se tento di modificare le dimensioni da "width:128px;height:64px;" a "width:100%;height:100%;" la bandiera viene postata a sinistra e non più al centro, come faccio? in pratica vorrei che fosse postata con le sue dimensioni originali... infatti ad es. http://gutguy2.altervista.org/ip/bandiere/AE.png è diverso da http://gutguy2.altervista.org/ip/bandiere/VA.png

io proverei sostituendo

Codice:

---

$("#bandiera").css("background-image","url('"+percorso+"')");

---

con

Codice:

---

$("#bandiera").css("background-image","url('"+percorso+"')").css("border", "1px solid");

---

intanto grz pr la tempestiva risp, volevo dire che funziona, ma c'è un prob con le dimensioni, poi vedere qui

È colpa dello style #bandiera impostato su 128x64

Citazione:

---

Originalmente inviato da stefanodurso

È colpa dello style #bandiera impostato su 128x64

---

è proprio quello che dicevo, come faccio a fare in modo che posti l'immagine alle sue dimensioni originali, anziché impostare a mano un valore di dimensioni che non è lo stesso per ogni bandiera ...

Come ti ho scritto qua, ottieni l'immagine nelle dimensioni originali non impostando alcuna dimensione.

Ma il problema è che poi l'immagine si "stira"? Puoi evitare il problema impostando soltanto una dimensione, ad esempio width; l'altezza si imposterà automaticamente a seconda delle dimensioni dell'immagine.

Ciao!

allora se tolgo l'altezza ottengo:

http://snag.gy/ivvez.jpg

se tolgo la larghezza ottengo:

http://snag.gy/UDJQ0.jpg

se tolgo entrambi ottengo:

http://snag.gy/stHVE.jpg

l'originale è sempre qui

con il codice così specificato:

Citazione:

---

<style>
#bandiera{
width:128px;height:64px;
background-repeat:no-repeat;
}
</style>

---

Togli sia altezza che larghezza, e inserisci l'immagine non come sfondo del DIV (che essendo vuoto ti produce il risultato che hai ora), ma come elemento img all'interno del DIV.
Dopo ricavi le dimensioni dell'immagine e imposti queste al DIV

Codice:

---

$("#bandiera").css("width", $('#bandiera > img').width()).css("height", $('#bandiera > img').height());

---

Oppure, uniforma le dimensioni delle bandiere.

PS. Permettimi. Già che ci sei scrivi del codice più moderno, evita tag obsoleti come <center>

Citazione:

---

Originalmente inviato da vplaza

Togli sia altezza che larghezza, e inserisci l'immagine non come sfondo del DIV (che essendo vuoto ti produce il risultato che hai ora), ma come elemento img all'interno del DIV.
Dopo ricavi le dimensioni dell'immagine e imposti queste al DIV

Codice:

---

$("#bandiera").css("width", $('#bandiera > img').width()).css("height", $('#bandiera > img').height());

---

Oppure, uniforma le dimensioni delle bandiere.

PS. Permettimi. Già che ci sei scrivi del codice più moderno, evita tag obsoleti come <center>

---

intanto grazie per la tua risposta, ho fatto come da te indicato, sostituendo il codice, poi ho eliminato altezza+larghezza, ma il risultato è che non appare nessuna bandiera, come si vede qui cmq mi sa che uniformerò le bandiere, mi senmbra la sol + pratica, anche se mi piacerebbe esplicare questa cosa

ho trovato questo:

Codice HTML:

---

<!DOCTYPE html>
<html>
<head>
<style>
* {
  padding: 0;
  margin: 0;
}
.fit {
  max-width: 100%;
  max-height: 100%;
}
.center {
  display: block;
  margin: auto;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height()
{
    var wh = $(window).height();
    $('body').attr('style', 'height:' + wh + 'px;');
}
$(document).ready(function() {
    set_body_height();
    $(window).bind('resize', function() { set_body_height(); });
});
</script>
</head>
<body>
<img id="the_pic" class="center fit" src="fort_collins_winter.jpg" >   
</body>
</html>

---

praticamente fa in modo che l'immagine rientri perfettamente nella finestra del browser, come del resto fa automaticamente chrome e qls altro browser credo quando si apre il percorso assoluto di una immagine, riportandolo alle dimensioni originali se rientra altrimenti rimpicciolendolo adeguatamente, ad es. l'immagine alle sue dimensioni originali non starebbe nel browser, per quello chrome lo reimpiciolisce adeguatamente, come fa questa pagina, vi invito ad aprirli entrambi e confrontarli...

ora questo concetto mi fa pensare che la stessa immagine venga restituita alla sue dimensioni originali così come è, controprova di ciò è che l'immagine risulta tale e quale qui, altro esempio:

http://gutguy2.altervista.org/ip/bandiere/VA.png
http://gutguy2.altervista.org/autofit/vaticano.htm

detto ciò ho modo di utilizzare questo codice per risolvere il problema del primo thread?