Comment conserver les proportions à l'aide de la balise HTML IMG

132

J'utilise une balise img HTML pour afficher une photo dans notre application. J'ai défini à la fois son attribut de hauteur et de largeur sur 64. Je dois afficher toute résolution d'image (par exemple, 256x256, 1024x768, 500x400, 205x246, etc.) en 64x64. Mais en définissant les attributs de hauteur et de largeur d'une balise img sur 64, cela ne maintient pas le rapport hauteur / largeur, donc l'image semble déformée.

Pour votre référence, mon code exact est:

<img src="Runtime Path to photo" border="1" height="64" width="64">
html css Sunil Kumar
la source
duplication possible de HTML / IE: étirer l'image pour l'ajuster, préserver les proportions
Jonathon Reinhart
Chridam, Il y a longtemps que j'ai posé cette question. J'ai quitté l'entreprise où je travaillais pour ce numéro. Je n'ai pas pu essayer les solutions proposées car je travaillais sur d'autres priorités pour respecter les délais à l'époque. Je n'ai pas pu avoir la chance de progresser davantage à ce sujet.
sunil kumar

Réponses:

134

Ne définissez pas la hauteur ET la largeur. Utilisez l'un ou l'autre et le rapport hauteur / largeur correct sera conservé.

.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" />
Développer l'extrait

Navet
la source
14
... mais que faire si vous voulez fixer à la fois la hauteur et la largeur?
fatuhoku
7
Cela n'a aucun sens pour les applications dynamiques. On ne sait pas si la largeur ou la hauteur sera à 64px, car cela dépend du rapport de l'image. Pourquoi est-ce la réponse votée?
Koenigsberg
@ Mär Cette question concernait les images de largeur et / ou de hauteur fixes. La réactivité n'était pas une exigence de la question.
Navet du
3
La taille est fixe, le rapport hauteur / largeur ne l'est pas, car la question portait spécifiquement sur n'importe quelle image de n'importe quelle résolution. Y compris les résolutions inférieures à 64x64.
Koenigsberg
66

voici l'exemple

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>
Développer l'extrait

AKHIL P
la source
8
Juste une note aux personnes qui souhaitent utiliser cette solution: l'adaptation aux objets n'est pas très bien prise en charge par les navigateurs. Il n'est pas du tout pris en charge par IE ou Edge. Source: caniuse.com/#feat=object-fit
Sean Dawson
2
Maintenant pris en charge sur Edge 16+, voir le tableau: w3schools.com/css/css3_object-fit.asp
Eddy R. le
44

Définissez widthet heightdes images sur auto, mais limitez à la fois max-widthet max-height:

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

Violon

Si vous voulez afficher des images de taille arbitraire dans les "cadres" de 64x64px, vous pouvez utiliser des wrappers de blocs en ligne et leur positionnement, comme dans ce violon .

Ilya Streltsyn
la source
3
Ne sera pas mis à l'échelle au-delà de la taille d'origine, uniquement en dessous de la taille d'origine.
Koenigsberg
40 
<img src="Runtime Path to photo"
     style="border: 1px solid #000; max-width:64px; max-height:64px;">
Lucio Fonseca
la source
2
C'est la bonne solution car elle reste indépendante de l'orientation de l'image. La solution de 3rror404 nécessite que vous sachiez si l'image est plus large que haute ou vice versa.
devios1
2
également mis widthet heightà auto.
Mahmoodvcs
Bonne solution pour contraindre à la fois la hauteur et la largeur.
Pavan Kumar
1
Une image sera correctement restreinte par cela, mais pas mise à l'échelle au-delà de sa taille d'origine. Bien que le message d'ouverture ne soit pas certain, parmi les deux, le PO voulait.
Koenigsberg
14

Aucune des méthodes répertoriées ne redimensionne l'image à la plus grande taille possible qui tient dans une boîte tout en conservant le rapport hauteur / largeur souhaité.

Cela ne peut pas être fait avec la balise IMG (du moins pas sans un peu de JavaScript), mais cela peut être fait comme suit:

 <div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div>
Lâche anonyme
la source
2
Oui. Utilisez style="background: url('_'); background-size: cover width:_px height:_px"pour le <img>tag.
Ujjwal Singh
3
Merci, @UjjwalSingh. En effet, il n'est coverpas nécessaire containde maximiser la taille de l'image au maximum. containconduit au "letterboxing".
Ortwin Gentz
4

Utilisez l' object-fit: containattribut en css de html img.

Ankit Kumar Verma
la source
3

Enveloppez l'image dans un divcoté 64x64 et définissez-la width: inheritsur l'image: 

<div style="width: 64px; height: 64px;">
    <img src="Runtime path" style="width: inherit" />
</div>
Konstantin Dinev
la source
1

Pourquoi n'utilisez-vous pas un fichier CSS distinct pour conserver la hauteur et la largeur de l'image que vous souhaitez afficher? De cette façon, vous pouvez fournir nécessairement la largeur et la hauteur.

par exemple: 

       image {
       width: 64px;
       height: 64px;
       }
Sahan De Silva
la source
1

Essaye ça:

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

Ajouter object-fit = "cover" forcera l'image à occuper de l'espace sans perdre le rapport hauteur / largeur.

Nick Friesen
la source