Come ridimensionare un'immagine ad una dimensione specifica con risoluzione originale usando i CSS? - css

Sto avendo una situazione per visualizzare un'immagine ridimensionata ad una dimensione specificata con risoluzione originale usando solo HTML e CSS. C'è un modo per fare questo.

Ho provato con il seguente codice:

Codice :

<div style="background-image: url(img.jpg); background-position: center; background-size: 50px; background-repeat:no-repeat; width:100px; height:100px;">

È il metodo corretto? o c'è qualche altra alternativa.

risposte:

Se ingrandisci un'immagine devi riempire lo spazio aggiuntivo con qualcosa.

Puoi allungare l'immagine per riempire le dimensioni più grandi, che devono dedurre nuovi pixel dai pixel originali attraverso uno qualsiasi dei numerosi algoritmi. tu può "t ottieni la "chiarezza originale" quando fai questo, anche se puoi ottenere "abbastanza buono" a seconda della situazione e di ciò che trovi accettabile.

Per mantenere la stessa chiarezza / risoluzione deviriempire lo spazio aggiuntivo con qualcos'altro, piuttosto che allungare l'immagine - una possibilità è quella di affiancare l'immagine per riempire lo spazio, ma ovviamente non è la stessa immagine. Per una piastrellatura dell'immagine di sfondo è spesso accettabile quando l'immagine è progettato per affiancare.

Non puoi creare qualcosa dal nulla.

Non è possibile ridimensionare un'immagine al volo e ottenerela stessa risoluzione, la risoluzione sarà la stessa (stesse dimensioni), più grande (dimensioni più piccole dell'originale) o più piccole (dimensioni più grandi dell'originale). Dovrai elaborare l'immagine con qualcosa come PHP per mantenere la stessa risoluzione.

Se parli di proporzioni che puoi farecon solo HTML / CSS ma è necessario un qualche tipo di processore lato server per determinare le coppie larghezza / altezza corrette in base alla dimensione dell'output finale. MA facendo ciò la tua risoluzione cambierà come indicato sopra avrai bisogno di almeno due DIV per cambiare la dimensione dell'immagine in modo corretto:

<div class="div_wrapper" style="overflow:hidden"><div class="image_wrapper" style="top:xxx;left:xxx;"><img src="/images/..." style="width:xxx;height:xxx;"></div></div>

Ovviamente è necessario assicurarsi che l'altezza / larghezza non sia più breve di div_wrapper altrimenti lo sfondo mostrerà.