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

132

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

html css

— sunil kumar
fonte

possível duplicado de HTML / IE: imagem estiramento para ajuste, preservar a relação de aspecto

— Jonathon Reinhart

Chridam, faz muito tempo que fiz essa pergunta. Saí da empresa em que estava trabalhando para esse problema. Não pude experimentar as soluções sugeridas porque estava trabalhando em outras prioridades para cumprir os prazos dessa vez. Não tive chance de avançar mais nisso.

— Sunil Kumar

134

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

Expandir snippet

— Nabo
fonte

14

... mas e se você quiser corrigir a altura e a largura?

— fatuhoku 7/09/16

7

Isso não faz sentido para aplicativos dinâmicos. Não se sabe se a largura ou a altura estarão em 64px, pois depende da proporção da imagem. Por que essa é a resposta votada?

— 31418 Koenigsberg

@ Mar Esta pergunta era sobre imagens de largura e / ou altura fixas. A capacidade de resposta não era um requisito da pergunta.

— Nabo

3

O tamanho é fixo, a proporção não é, pois a pergunta era especificamente sobre qualquer imagem de qualquer resolução. Incluindo resoluções menores que 64x64.

— Koenigsberg

66

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>

Expandir snippet

— AKHIL P
fonte

8

Apenas uma observação para as pessoas que desejam usar esta solução: o ajuste do objeto não é muito bem suportado pelos navegadores. Não é suportado pelo IE ou pelo Edge. Fonte: caniuse.com/#feat=object-fit #

— Sean Dawson

2

Agora suportado no Edge 16+, consulte a tabela: w3schools.com/css/css3_object-fit.asp

— Eddy R.

44

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 .

— Ilya Streltsyn
fonte

3

Não será dimensionado além do tamanho original, apenas abaixo do tamanho original.

— Koenigsberg 31/07

40

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

— Lucio Fonseca
fonte

2

Esta é a solução correta, pois continua independente da orientação da imagem. A solução do 3rror404 exige que você saiba se a imagem é mais larga do que alta ou vice-versa.

— precisa saber é o seguinte

2

também definir widthe heightpara auto.

— Mahmoodvcs

Solução certa para restringir a altura e a largura.

— Pavan Kumar

1

Uma imagem será adequadamente restringida por isso, mas não será dimensionada além do tamanho original. Embora, no posto de abertura, não seja certo qual dos dois o OP queria.

— 31418 Koenigsberg

14

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>

— Covarde anônimo
fonte

2

Sim. Use style="background: url('_'); background-size: cover width:_px height:_px"para a <img>tag.

— Ujjwal Singh

3

Obrigado, @UjjwalSingh. Na verdade, precisamos covernão containde forma a maximizar o tamanho da imagem para o maior possível. containleva a "letterboxing".

— Ortwin Gentz 28/02

4

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

— Ankit Kumar Verma
fonte

3

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>

— Konstantin Dinev
fonte

1

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;
       }

— Sahan De Silva
fonte

1

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.

— Nick friesen
fonte