Nwlapcug.com


Come creare Div per ritagliare un'immagine in CSS

La proprietà di "overflow" in CSS o Cascading Style Sheets, dice al browser che cosa fare con il contenuto che è maggiore della dimensione dell'elemento contenitore; è possibile impostare overflow per "scorrere" per le barre di scorrimento o "hidden" ritagliare la tracimazione contenuto. Creare un div che avvolge un'immagine, impostare il div a una certa dimensione e dire al browser di non mostrare parti dell'immagine che non rientrano le linee invisibili del div.

Istruzioni

1

Aprire la pagina Web in blocco note o un editor di codice, quindi è possibile visualizzare e modificare il suo codice. Individuare l'immagine che si desidera ritagliare nel codice:

< img alt = "My Image" / >

2

Aggiungere un insieme di tag "< div >" attorno all'immagine. Dare il nuovo div un nome ID:

< div id = "ritagliare" >< img alt = "My Image" / >< / div >

3

Individuare il tag "< style >" nella testa del codice della pagina Web o aggiungerli sotto il tag "< title >":

< style type = "text/css" >

< / stile >

Aggiungere il codice CSS tra i tag di "stile < >".

4

Scrivere questo codice per ritagliare un'immagine all'interno di un div:

ritagliare {

Larghezza: 100px;

Altezza: 100px;

overflow: hidden;

}

Modificare "ritagliare" con il nome ID del vostro div. È necessario impostare almeno una larghezza o un'altezza o entrambi, per ritagliare l'immagine. Impostare "overflow: hidden" per tagliare l'immagine ovunque esso vada oltre i limiti del div.