Browser Web ridimensionare automaticamente la larghezza dell'immagine o altezza a seconda o meno una larghezza o un'altezza è stata impostata nel codice Cascading Style Sheets (CSS). Quando si vuole scalare alla larghezza, ad esempio, impostare una larghezza e il browser si prenderà cura di corrispondenza l'altezza. Solo un'altezza si imposta anche il browser da utilizzare una larghezza che è in proporzione di quell'altezza. Anche se il ridimensionamento dell'immagine è meglio lasciare ai programmi di editor grafico per motivi di dimensione del file e lo stretching o schiacciamento, è possibile utilizzare questo trucco per ridimensionare le immagini in CSS al volo e tenerli in proporzione.

Istruzioni

1

Andare su "Start" nella barra delle applicazioni di Windows e immettere "Blocco note" o il nome di un editor di codice nella barra di ricerca. Premere il tasto "Enter" per avviare il programma. Selezionare "File" e aprire il file contenente il codice per la tua pagina Web, che è molto probabilmente un file HTML.

2

Individuare il tag "< link >" nella parte superiore del codice per il file e controllare il contenuto dei loro attributi "href" per tutti i file CSS. Quando trovi il nome di un file CSS, tornare a "File" nella barra degli strumenti e aprire il file. Ora dovreste avere due file aprire: uno per uno per fogli di stile CSS e pagine Web. Se non si dispone di un file CSS, crearne uno e aggiungere il tag "< link >" al codice per la tua pagina Web tra i tag "< head >":

< link rel = "stylesheet" href="path/to/style.css" type = "text/css" / >

3

Ottenere il nome di ID per la tua immagine osservando il tag "< img >" nel codice della pagina Web:

< img alt = "Un'immagine" id = "myimage" / >

Nel codice precedente, "myimage" è il nome di ID. Aggiungere un nome ID al tag "< img >" se non esiste già.

4

Vai alla parte inferiore del vostro file CSS e scrivere un selettore per "selezionare" l'immagine con il nome di ID:

MyImage {}

Coppie proprietà-valore andare all'interno delle parentesi graffe. Ecco dove si inserirà il codice per modificare le dimensioni dell'immagine.

5

Aggiungere un'altezza o una larghezza al codice CSS:

MyImage {width: 300px;} MyImage {altezza: 200px;}

Sopra è un esempio di ogni tipo di impostazione. Quando si imposta una larghezza senza un'altezza, il browser calcolerà automaticamente l'altezza della scala. È vero anche il contrario.

Consigli & Avvertenze

• Utilizzare il seguente codice (meno le virgolette) per rendere Internet Explorer di utilizzare un metodo di ridimensionamento meglio: "img {-ms-modalità di interpolazione: bicubico;}".
• Ridimensionamento delle immagini, fatto in un editor di grafica è ancora preferibile farlo in CSS, soprattutto quando ridimensionamento di un'immagine di grandi dimensioni. Nel caso di una grande immagine, ci vorrà ancora solo il tempo per caricare, anche se ridimensionato.