Ci sono proprietà CSS, come le immagini di sfondo, le immagini dei bordi, le maschere e le proprietà di ritaglio, con le quali è possibile aggiungi direttamente le immagini alle pagine Web e controlla il loro comportamento. Tuttavia, ci sono anche meno citate proprietà CSS correlate alle immagini lavorare su immagini aggiunte con il Tag HTML, quale è il modo preferito di aggiungere immagini alle pagine web.
La descrizione del lavoro di queste ultime proprietà varia da controllare l'ombra dell'immagine a impostando la nitidezza, aiutandoci a controllare meglio l'aspetto e la posizione delle immagini aggiunte con etichetta. Vediamoli uno per uno.
1. Contrasta le immagini con immagine rendering
Quando un'immagine viene ingrandita, il browser leviga l'immagine, quindi non sembra pixelato. Ma, a seconda della risoluzione dell'immagine e dello schermo, questo potrebbe non essere il migliore in ogni momento. Puoi controllare questo comportamento del browser con immagine rendering proprietà.
Questa proprietà ben supportata controlla l'algoritmo utilizzato per ridimensionare un'immagine. I suoi due valori principali sono croccanti spigoli e pixelated.
Il croccanti spigoli valore mantiene il contrasto cromatico tra i pixel. In altre parole, non viene effettuato alcun livellamento per le immagini, che ottimo per la grafica pixel.
quando pixelated viene utilizzato, potrebbero essere i pixel vicini di un pixel riprendere il suo aspetto, facendolo sembrare insieme loro formare un grande pixel, ottimo per schermi ad alta risoluzione.
Se continui a guardare da vicino i bordi del fiore nella GIF sottostante, puoi vedere la differenza tra un normale e un pixelated Immagine.
img image-rendering: pixelated;
2. Estendi le immagini con oggetto-fit
Il contenere, copertina, riempire i valori sono tutti familiari, li usiamo per il background-size proprietà che controlla il modo in cui un'immagine di sfondo riempie l'elemento a cui appartiene. Il oggetto-fit la proprietà è abbastanza simile ad essa, come determina anche come le dimensioni di un'immagine all'interno del suo contenitore.
Il contenere valore contiene l'immagine nel suo contenitore. copertina fa lo stesso, ma se le proporzioni dell'immagine e del contenitore non corrispondono, il l'immagine è ritagliata. riempire causa l'immagine allungare e riempire il suo contenitore. rimpiccioliresceglie la versione più piccola dell'immagine da visualizzare.
Allo stesso modo al completamento background-position proprietà di background-size, c'e 'un oggetto posizioni proprietà per oggetto-fit, pure.
Il oggetto-fit proprietà sposta un'immagine all'interno di un contenitore di immagini alle coordinate date. Le coordinate possono essere definite come unità di lunghezza assoluta, unità di lunghezza relativa, parole chiave (superiore, sinistra, centro, parte inferiore, e destra) o a combinazione valida di loro (inizio 20px a destra 5px, centro destra 80 px).
A volte aggiungiamo (che sono in linea per natura) accanto alle stringhe di testo per ulteriori informazioni o decorazioni. In quel caso, allineare il testo e l'immagine nella posizione desiderata può essere un po 'difficile, se non si sa quale proprietà usare.
Il vertical-align la proprietà è non esclusivo per le sole celle di tabella. Può anche allineare un elemento in linea all'interno di una scatola in linea, e quindi può essere usato per allineare un'immagine in una riga di testo. Ci vuole un discreto numero di valori che possono essere applicati a un elemento in linea, quindi hai molte opzioni tra cui scegliere.
PDF
5. Ombreggia immagini con filtro: drop-shadow ()
Se usato in modo non appariscente nei testi e nelle scatole, le ombre possono aggiungere vita a una pagina web. Lo stesso vale per le immagini. Immagini con forme di base e sfondi trasparenti può beneficiare del drop-ombra Filtro CSS.
I suoi argomenti sono simile ai valori delle proprietà CSS relative all'ombra (text-shadow, box-ombra). I primi due rappresentano il distanza verticale e orizzontale tra le ombre e l'immagine, il terzo e il quarto sono i sfocatura e il raggio di diffusione dell'ombra, e l'ultimo è il colore dell'ombra.
Proprio come text-shadow, drop-ombra crea anche un'ombra che è modellato all'oggetto appartenente. Quindi, quando viene applicato a un'immagine, l'ombra assume la forma della porzione visibile dell'immagine.
#container width: 300px; altezza: 300 px; img width: 100%; altezza: 100%; object-fit: contenere;
#container width: 300px; altezza: 300 px; img width: 100%; altezza: 100%; object-fit: contenere; 
