Como manter a proporção usando a tag HTML IMG

Estou usando uma tag img de HTML para mostrar uma foto em nosso aplicativo. Eu configurei o atributo height e width para 64. Preciso mostrar qualquer resolução de imagem (por exemplo, 256x256, 1024x768, 500x400, 205x246 etc.) como 64x64. Porém, ao definir os atributos de altura e largura de uma tag img para 64, não é possível manter a proporção, para que a imagem pareça distorcida.

Para sua referência, meu código exato é:

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

Não defina altura e largura. Use um ou outro e a proporção correta será mantida.

.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" />

aqui está o exemplo

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>

Defina widthe heightdas imagens para auto, mas limite ambos max-widthe max-height:

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

Violino

Se você deseja exibir imagens de tamanho arbitrário nos "quadros" de 64x64px, pode usar invólucros de bloco embutido e posicionamento para eles, como neste violino .

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

Nenhum dos métodos listados dimensiona a imagem para o maior tamanho possível que cabe em uma caixa, mantendo a proporção desejada.

Isso não pode ser feito com a tag IMG (pelo menos não sem um pouco de JavaScript), mas pode ser feito da seguinte maneira:

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

Use o object-fit: containatributo in em css do html img.

Embrulhe a imagem em um divcom as dimensões 64x64 e defina width: inherita imagem:

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

Por que você não usa um arquivo CSS separado para manter a altura e a largura da imagem que deseja exibir? Dessa forma, você pode fornecer a largura e a altura necessariamente.

por exemplo:

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

Tente o seguinte:

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

Adicionar ajuste de objeto = "capa" forçará a imagem a ocupar o espaço sem perder a proporção.