CSS Ridimension/Zoom-In Effect sull'immagine mantenendo le dimensioni

Le immagini sono la parte più importante e cruciale dello sviluppo web. A volte, gli sviluppatori Web aggiungono vari effetti sulle immagini per rendere la pagina web più attraente, tra cui il lancio delle immagini, lo zoom, lo zoom di effetti e così via. Più specificamente, nel processo di zoom, un'immagine diventa più grande secondo il requisito. In un visualizzatore di immagini, il processo di zoom è molto importante. Per ottenere questo processo, gli utenti possono utilizzare il "scala()" E "tradurre()"Metodi.

Questo articolo esaminerà:

• Come inserire un'immagine in HTML?
• Come ridimensionare/ingrandire l'effetto su un'immagine mantenendo le dimensioni in CSS?

Come inserire un'immagine in HTML?

Per aggiungere un'immagine in HTML, gli utenti devono seguire questi passaggi dichiarati.

Passaggio 1: crea un contenitore "div"

Innanzitutto, utilizza il “div"Elemento per creare un contenitore" div ". Quindi, inserisci un attributo di classe e specifica un nome particolare per esso

Passaggio 2: aggiungi un'immagine

Quindi, aggiungi un'immagine con l'aiuto di ""Tag. All'interno del tag IMG, specificare i seguenti attributi:

• "src"L'attributo viene utilizzato per aggiungere un file multimediale.
• "Al"Viene utilizzato per mostrare il testo su un'immagine quando l'immagine non viene visualizzata per qualche motivo:

Si può osservare che un'immagine è stata aggiunta correttamente:

Come ridimensionare/ingrandire l'effetto su un'immagine mantenendo le dimensioni in CSS?

Per ridimensionare/ingrandire in vigore un'immagine mantenendo le dimensioni, accedi all'immagine con un “: Hover"Effetto e applica"trasformare"Con valore"Scala (2.0)"

Prova le istruzioni fornite di seguito per farlo.

Passaggio 1: modella il contenitore "div"

Accedi al contenitore "Div" utilizzando il nome della classe ".contento img"E applica le proprietà CSS elencate di seguito:

.img-content
display: blocco inline;
Overflow: iniziale;
Margine: 20px 100px;
imbottitura: 40px;
larghezza: 300px;
Altezza: 300px;
Background-color: RGB (233, 146, 16);

Qui:

• "Schermo"La proprietà viene utilizzata per l'impostazione del display per un'immagine. Per fare ciò, il valore di questa proprietà è impostato come "blocco inline".
• "overflow"Controlla il contenuto che è lungo per adattarsi a un'area.
• "margine"Definisce uno spazio sul lato più esterno del confine dell'elemento.
• "imbottitura"Viene utilizzato per allocare lo spazio all'interno dell'area definita.
• "larghezza"È utilizzato per l'impostazione della larghezza dell'elemento.
• "altezza"La proprietà assegna l'altezza particolare per un elemento.
• "colore di sfondo"Specifica un colore per il retro di un elemento.

Produzione

Passaggio 2: applicare il mouse sull'immagine

Accedi all'immagine con effetto hover come "IMG: Hover":

img: hover
trasformazione: scala (2.0);

Quindi, applica il "trasformare"Proprietà utilizzata per l'impostazione della trasformazione 2D o 3D per un elemento. A tale scopo, il valore di questa proprietà è impostato come scala (2.0). Più specificamente, il "scala()"La funzione CSS viene utilizzata per definire la trasformazione utilizzata per ridimensionare l'elemento sul piano 2D.

Produzione

Questo è tutto su questo post per l'effetto zoom su un'immagine mantenendo le dimensioni.

Conclusione

Per ridimensionare/ingrandire in vigore un'immagine, inserire prima un'immagine nella pagina HTML, quindi applicare le proprietà CSS, inclusa "Schermo"Per impostare il display dell'elemento e"overflow", Che viene utilizzato per il controllo del contenuto troppo grande per adattarsi a un'area. Successivamente, accedi all'immagine con ": Hover"Effetto e applicare la proprietà trasforma con il valore"Scala (2.0)"Per ridimensionare l'elemento sul piano 2D. Questo post ha spiegato il metodo per il ridimensionamento/zoom in vigore su un'immagine mantenendo la dimensione.