Come ridimensionare le immagini in ASP.Net

June 8

Per ridimensionare un'immagine in ASP.NET, è necessario utilizzare una combinazione di controllo lato server Immagine con il codice .NET (C # o Visual Basic). Specificando sia l'altezza, larghezza o entrambe le proprietà del controllo immagine tramite il codice, è possibile ridimensionare l'immagine in risposta a un'azione evento come una casella, fare una selezione da un menu a discesa o facendo clic su un pulsante di scelta. Impostando il "AutoPostBack" proprietà del controllo dell'azione, l'immagine viene automaticamente ridimensionata.

istruzione

Creare un nuovo progetto

1 Aprire Microsoft Visual Studio (o Visual Web Developer Express Edition).

2 Scegliere "New Project" dal menu "File", quindi su "ASP.NET Web vuoto Application" nella finestra "Nuovo progetto".

3 Specificare un "Nome" e "Location" a scelta nelle caselle di testo, quindi fare clic sul pulsante "OK".

4 Fare clic con il nome del progetto nella finestra "Solution Explorer" e cliccare su "Aggiungi" e poi "Nuovo elemento".

5 Selezionare "Web Form" dall'elenco dei modelli installati, e fare clic sul pulsante "OK".

Progettare l'immagine della pagina

6 Fare clic con il progetto nel "Solution Explorer e scegliere" Aggiungi "e poi" Elemento esistente .... "

7 Passare alla posizione in cui si trova l'immagine e fare doppio clic per aggiungerlo al progetto.

8 Fare clic sul pulsante "Design" per rendere la pagina "WebForm1.aspx" nella visualizzazione di progettazione.

9 Individuare il controllo "Immagine" dalla scheda "standard" della Casella degli strumenti e fare doppio clic su di esso per aggiungerlo alla pagina.

10 Fare clic sul controllo immagine e specificare la proprietà "Larghezza" nella finestra Proprietà come "300". (Questo viene misurata come 300 pixel.)

11 Individuare la proprietà "ImageUrl" nella finestra Proprietà e fare clic sul pulsante in campo con la "..." per aprire la finestra di dialogo Seleziona immagine.

12 Fare doppio clic l'immagine nella colonna "contenuto della cartella" per aggiungerlo alla pagina.

Aggiungere il controllo di ridimensionamento

13 Individuare il controllo "RadioButtonList" nella scheda "standard" della Casella degli strumenti e fare doppio clic su di esso per aggiungerlo alla pagina.

14 Fare clic sul controllo "RadioButtonList" sulla pagina per evidenziarlo, fare clic sul simbolo ">" e quindi fare clic sul link "Modifica elementi".

15 Aggiungere le seguenti voci all'elenco utilizzando il pulsante "Aggiungi":

Piccolo (100px)

Medium (200px)

Grande (300px)

16 Fare clic sul pulsante "OK" e verificare gli elementi specificati vengono visualizzati nell'elenco.

17 Individuare la proprietà "AutoPostBack" nella finestra Proprietà e selezionare "True" dal menu a discesa.

Scrivere il codice di ridimensionamento

18 Fare doppio clic sul controllo "RadioButtonList" per visualizzare il file code-behind.

19 Digitare il seguente tra le "{" e "}" parentesi della manifestazione RadioButtonList1_SelectedIndexChanged:

if (RadioButtonList1.SelectedIndex == 0)

{

Image1.Width = 100;

}

else if (RadioButtonList1.SelectedIndex == 1)

{

Image1.Width = 200;

}

altro

{

Image1.Width = 300;

}

20 Fare clic sull'icona "Salva tutto" disco (o premere + "Shift" "Ctrl" + "S" sulla tastiera) per salvare tutte le modifiche al progetto.

21 Fare clic sul pulsante con la freccia verde (o premere tastiera "F5") per eseguire il progetto.

22 Fare clic su ciascuna delle scelte e verificare che l'immagine larghezza modifiche al formato selezionato. (È possibile fare clic destro sull'immagine e selezionate "Proprietà" dal menu per visualizzare la dimensione dell'immagine.)

Consigli e avvertenze

  • E 'generalmente meglio specificare l'altezza o la proprietà width nel codice, piuttosto che sia, per evitare la distorsione dell'immagine.
  • L'immagine deve essere almeno l'altezza o larghezza si specifica come il massimo altezza o la larghezza da visualizzare.

Articoli Correlati