Come mantenere le proporzioni usando il tag HTML IMG

132

Sto usando un tag img di HTML per mostrare una foto nella nostra applicazione. Ho impostato sia l'attributo altezza che larghezza su 64. Devo mostrare qualsiasi risoluzione dell'immagine (ad es. 256x256, 1024x768, 500x400, 205x246, ecc.) Come 64x64. Ma impostando gli attributi di altezza e larghezza di un tag img su 64, non mantiene le proporzioni, quindi l'immagine appare distorta.

Per tuo riferimento il mio codice esatto è:

<img src="Runtime Path to photo" border="1" height="64" width="64">

html css

— Sunil Kumar
fonte

possibile duplicato di HTML / IE: allunga l'immagine per adattarla, preserva le proporzioni

— Jonathon Reinhart,

Chridam, è molto tempo che faccio questa domanda. Ho lasciato quella società in cui lavoravo per questo problema. Non ho potuto provare le soluzioni suggerite perché stavo lavorando su altre priorità per rispettare le scadenze quel tempo. Non ho avuto la possibilità di fare ulteriori progressi al riguardo.

— Sunil Kumar,

134

Non impostare altezza E larghezza. Utilizzare l'uno o l'altro e verranno mantenute le proporzioni corrette.

.widthSet {
    max-width: 64px;
}

.heightSet {
    max-height: 64px;
}

<img src="http://placehold.it/200x250" />

<img src="http://placehold.it/200x250" width="64" />

<img src="http://placehold.it/200x250" height="64" />

<img src="http://placehold.it/200x250" class="widthSet" />

<img src="http://placehold.it/200x250" class="heightSet" />

Espandi frammento

— Rapa
fonte

14

... ma cosa succede se si desidera correggere sia l'altezza che la larghezza?

— Fatuhoku,

7

Questo non ha senso per le applicazioni dinamiche. Non è noto se la larghezza o l'altezza saranno a 64 px, in quanto dipende dal rapporto dell'immagine. Perché questa è la risposta votata?

— Koenigsberg,

@ Mär Questa domanda riguardava le immagini a larghezza e / o altezza fisse. La reattività non era un requisito della domanda.

— Rapa

3

Le dimensioni sono fisse, le proporzioni no, poiché la domanda riguardava specificamente qualsiasi immagine di qualsiasi risoluzione. Comprese risoluzioni inferiori a 64x64.

— Koenigsberg

66

ecco quello di esempio

div{
   width: 200px;
   height:200px;
   border:solid
 }

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    }

<div>
  <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png">
</div>

Espandi frammento

— AKHIL P
fonte

8

Solo una nota per le persone che vogliono utilizzare questa soluzione: l'adattamento agli oggetti non è molto ben supportato dai browser. Non è affatto supportato da IE o Edge. Fonte: caniuse.com/#feat=object-fit

— Sean Dawson

2

Ora supportato su Edge 16+, vedere la tabella: w3schools.com/css/css3_object-fit.asp

— Eddy R.

44

Impostare widthe heightdelle immagini su auto, ma limitare entrambi max-widthe max-height:

img {
    max-width:64px;
    max-height:64px;
    width:auto;
    height:auto;
}

Violino

Se si desidera visualizzare immagini di dimensioni arbitrarie nei "frame" 64x64px, è possibile utilizzare wrapper a blocchi inline e posizionarli per essi, come in questo violino .

— Ilya Streltsyn
fonte

3

Non si ridimensionerà oltre la dimensione originale, solo al di sotto della dimensione originale.

— Koenigsberg,

40

<img src="Runtime Path to photo"
     style="border: 1px solid #000; max-width:64px; max-height:64px;">

— Lucio Fonseca
fonte

2

Questa è la soluzione corretta in quanto continua a essere indipendente dall'orientamento dell'immagine. La soluzione di 3rror404 richiede che tu sappia se l'immagine è più larga di quanto sia alta o viceversa.

— devios1

2

anche impostare widthe heightsu auto.

— Mahmoodvcs,

La giusta soluzione per limitare sia l'altezza che la larghezza.

— Pavan Kumar,

1

Un'immagine sarà adeguatamente limitata da questo, ma non ridimensionata oltre la sua dimensione originale. Sebbene dal post iniziale non sia certo quale dei due l'OP abbia voluto.

— Koenigsberg,

14

Nessuno dei metodi elencati ridimensiona l'immagine alla dimensione più grande possibile che si adatta in una scatola mantenendo le proporzioni desiderate.

Questo non può essere fatto con il tag IMG (almeno non senza un po 'di JavaScript), ma può essere fatto come segue:

 <div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div>

— Anonimo codardo
fonte

2

Sì. Utilizzare style="background: url('_'); background-size: cover width:_px height:_px"per il <img>tag.

— Ujjwal Singh,

3

Grazie, @UjjwalSingh. In effetti, abbiamo bisogno covernon containal fine di massimizzare la dimensione dell'immagine al più grande possibile. containporta a "letterboxing".

— Ortwin Gentz,

4

Usa l' object-fit: containattributo in in CSS di HTML img.

— Ankit Kumar Verma
fonte

3

Avvolgere l'immagine in una divdimensione 64x64 e impostarla width: inheritsull'immagine:

<div style="width: 64px; height: 64px;">
    <img src="Runtime path" style="width: inherit" />
</div>

— Konstantin Dinev
fonte

1

Perché non usi un file CSS separato per mantenere l'altezza e la larghezza dell'immagine che vuoi visualizzare? In questo modo, puoi fornire necessariamente la larghezza e l'altezza.

per esempio:

       image {
       width: 64px;
       height: 64px;
       }

— Sahan De Silva
fonte

1

Prova questo:

<img src="Runtime Path to photo" border="1" height="64" width="64" object-fit="cover">

L'aggiunta di object-fit = "cover" costringerà l'immagine a occupare lo spazio senza perdere le proporzioni.

— Nick Friesen
fonte