Ridimensionamento img HTML

114

Sto cercando di visualizzare alcune immagini di grandi dimensioni con tag img HTML. Al momento vanno oltre il bordo dello schermo; come posso ridimensionarli per rimanere all'interno della finestra del browser?

O nel probabile caso in cui ciò non sia possibile, è possibile almeno dire "visualizzare questa immagine al 50% della sua normale larghezza e altezza"?

Gli attributi larghezza e altezza distorcono l'immagine - per quanto ne so, questo perché si riferiscono a qualsiasi attributo con cui il contenitore potrebbe finire, che non sarà correlato all'immagine. Non posso specificare i pixel perché devo gestire una vasta raccolta di immagini ciascuna con una dimensione in pixel diversa. La larghezza massima non funziona.

html image-scaling

— rwallace
fonte

4

Tieni presente che non è consigliabile inviare immagini enormi e renderle piccole con css. È meglio avere versioni diverse della stessa immagine per risparmiare larghezza di banda e rendere la pagina più reattiva (anche se l'immagine apparirà piccola, verrà inviata l'immagine intera).

— Esteban Küber,

1

rwallace, stai usando .net o PHP o qualcosa di diverso dal puro HTML?

— Dorjan

1

La dimensione del file immagine non ha importanza, nel caso in cui sto cercando di essere frugale con la larghezza di banda non è necessario. Sto usando PHP, ma la soluzione HTML funziona.

— rwallace

135

Imposta solo widtho height, e l'altro ridimensionerà automaticamente. E sì, puoi usare una percentuale.

La prima parte può essere eseguita, ma richiede JavaScript, quindi potrebbe non funzionare per tutti gli utenti.

— RiddlerDev
fonte

7

Per favore, per favore, tieni presente che farlo su immagini di grandi dimensioni comporterà lunghi tempi di download per le pagine che non dovrebbero avere lunghi tempi di download. È sempre meglio ridimensionare effettivamente l'immagine, se possibile.

— ceejayoz

Grazie! Risulta che la tua soluzione di impostare solo la larghezza non solo funziona per il corretto ridimensionamento, ma in realtà fa anche la prima parte semplicemente impostando la larghezza al 100%.

— rwallace

2

@ceejayoz Sono d'accordo, ma non è quello che sta chiedendo.

— RiddlerDev

@ceejayoz Mi chiedo, perché ci vuole più tempo? Non deve essere ridimensionato quando lo visualizza per entrambe le situazioni? O stai dicendo ridimensionare manualmente l'immagine reale e modificare il file?

— Abdul

2

@Abdul sto dicendo che un'immagine da 5 MB di 3.000x3.000 pixel non dovrebbe essere utilizzata in uno slot da 100x100 pixel nel tuo sito web.

— ceejayoz

18

css è sufficiente:

width : desired_width;
height: auto;/*to preserve the aspect ratio of the image*/

— Selvadurai Handeeban
fonte

9

So che questa domanda è stata posta da molto tempo ma ad oggi una semplice risposta è:

<img src="image.png" style="width: 55vw; min-width: 330px;" />

L'uso di vw qui dice che la larghezza è relativa al 55% della larghezza del viewport.

Tutti i principali browser oggigiorno lo supportano.

Controlla questo collegamento .

— Dimitri de Jesus
fonte

1

vwè stato un salvavita per me, gli altri metodi non hanno funzionato per l'immagine a portata di mano.

— caramello

6

Nessun Javascript richiesto.

IE6 Internet Explorer 6

Percent funziona solo per la larghezza di un elemento, ma height:100%;non funziona senza il codice corretto.

CSS

html, body { height:100%; }

Quindi l'utilizzo di una percentuale funziona correttamente e si aggiorna dinamicamente al ridimensionamento della finestra.

<img src="image.jpg" style="height:80%;">

Non è necessario un attributo di larghezza, la larghezza viene ridimensionata proporzionalmente al variare delle dimensioni della finestra del browser.

E questo piccolo gioiello, nel caso in cui l'immagine sia ingrandita, non sembrerà (eccessivamente) a blocchi (si interpola).

img { -ms-interpolation-mode: bicubic; }

Gli oggetti di scena vanno a questa fonte: Ultimate IE6 Cheatsheet: come correggere oltre 25 bug di Internet Explorer 6

— identificato-1
fonte

6

L'aggiunta max-width: 100%;al imgtag funziona per me.

— Ralph David Abernathy
fonte

2

Penso che la soluzione migliore sia ridimensionare le immagini tramite script o localmente e caricarle di nuovo. Ricorda, stai costringendo i tuoi spettatori a scaricare file più grandi di quelli necessari

— riotera
fonte

0

Il modo migliore in cui so come farlo è:

1) imposta l'overflow per scorrere e in questo modo l'immagine rimarrebbe all'interno ma puoi scorrere per vederla invece

2) carica un'immagine più piccola. Ora ci sono molti programmi là fuori durante il caricamento (avrai bisogno di qualcosa come PHP o .net per fare questo btw) puoi farlo ridimensionare automaticamente.

3) Vivere con esso e impostare la larghezza e l'altezza, anche se questo lo farà sembrare distorto ma la dimensione giusta comporterà comunque che l'utente debba scaricare l'immagine a grandezza naturale.

In bocca al lupo!

— Dorjan
fonte