Estou trabalhando com imagens e me deparei com um problema com proporções.

<img src="big_image.jpg" width="900" height="600" alt="" />

Como você pode ver, heighte widthjá está especificado. Adicionei regra CSS para imagens:

img {
  max-width:500px;
}

Mas para big_image.jpg, eu recebo width=500e height=600. Como posso definir as imagens para serem redimensionadas, mantendo suas proporções.

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Isso reduzirá a imagem se ela for muito grande para a área especificada (como desvantagem, ela não aumentará a imagem).

Eu lutei bastante com esse problema e, finalmente, cheguei a esta solução simples:

object-fit: cover;
width: 100%;
height: 250px;

Você pode ajustar a largura e a altura para atender às suas necessidades, e a propriedade de ajuste do objeto fará o corte para você.

Felicidades.

As soluções abaixo permitirão o aumento e redução da imagem , dependendo da largura da caixa pai.

Todas as imagens têm um contêiner pai com uma largura fixa apenas para fins de demonstração . Na produção, essa será a largura da caixa pai.

Melhores práticas (2018):

Esta solução informa ao navegador para renderizar a imagem com a largura máxima disponível e ajustar a altura como uma porcentagem dessa largura.

.parent {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

Solução mais sofisticada:

Com a solução mais sofisticada, você poderá cortar a imagem independentemente do tamanho e adicionar uma cor de fundo para compensar o corte.

.parent {
  width: 100px;
}

.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
  <div class="container">
    <img width="640" height="220" src="https://placehold.it/640x220">
  </div>
</div>

Para a linha que especifica o preenchimento, é necessário calcular a proporção da imagem, por exemplo:

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

Portanto, preenchimento superior = 34,37%.

A propriedade de tamanho do plano de fundo é, por exemplo,> = 9 apenas, mas se estiver tudo bem com você, você pode usar uma div com background-imagee definir background-size: contain:

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Agora você pode simplesmente definir o tamanho do seu div para o que quiser e não apenas a imagem manterá sua proporção, como também será centralizada vertical e horizontalmente dentro do div. Apenas não esqueça de definir os tamanhos no css, já que divs não tem o atributo width / height na própria tag.

Essa abordagem é diferente da resposta setecs, usando isso, a área da imagem será constante e definida por você (deixando espaços vazios horizontal ou verticalmente, dependendo do tamanho da div e da proporção da imagem), enquanto a resposta setecs fornecerá uma caixa exatamente tamanho da imagem dimensionada (sem espaços vazios).

Edit: De acordo com a documentação de tamanho de plano de fundo MDN, você pode simular a propriedade de tamanho de plano de fundo no IE8 usando uma declaração de filtro proprietária:

Embora o Internet Explorer 8 não suporte a propriedade tamanho do plano de fundo, é possível emular algumas de suas funcionalidades usando a função -ms-filter não padrão:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

Muito parecido com algumas respostas aqui, mas no meu caso eu tinha imagens que às vezes eram mais altas, às vezes maiores.

Esse estilo funcionou como um encanto para garantir que todas as imagens usem todo o espaço disponível, mantenha a proporção e não corte:

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

Remova a propriedade "height".

<img src="big_image.jpg" width="900" alt=""/>

Ao especificar ambos, você está alterando a proporção da imagem. Apenas definir um redimensionará, mas preservará a proporção.

Opcionalmente, para restringir as sobredimensionamentos:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

Basta adicionar isso ao seu css, ele diminuirá e expandirá automaticamente mantendo a proporção original.

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

Não existe uma maneira padrão de preservar a proporção para imagens com width, heighte max-widthespecificadas juntas.

Portanto, somos forçados a especificar widthe heightevitar "pulos" na página durante o carregamento de imagens, ou a usar max-widthe não especificar dimensões para as imagens.

Especificar apenas width(sem height) normalmente não faz muito sentido, mas você pode tentar substituir o heightatributo HTML adicionando uma regra como IMG {height: auto; }na sua folha de estilo.

Veja também o bug relacionado do Firefox 392261 .

Aqui está uma solução:

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

Isso garantirá que a imagem sempre cubra todo o pai (diminuindo e diminuindo a escala) e mantendo a mesma proporção.

Defina a classe CSS da sua tag de contêiner de imagem para image-class:

<div class="image-full"></div>

e adicione isso a sua folha de estilo CSS.

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}

Para manter uma imagem responsiva e ainda impor a imagem a uma determinada proporção, você pode fazer o seguinte:

HTML:

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

E SCSS:

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

Isso pode ser usado para impor uma certa proporção, independentemente do tamanho da imagem que os autores carregam.

Obrigado a @Kseso em http://codepen.io/Kseso/pen/bfdhg . Verifique este URL para obter mais proporções e um exemplo de trabalho.

Para forçar a imagem que caiba no tamanho exato, você não precisa escrever muitos códigos. É tão simples

img{
    width: 200px;
    height: auto;
    object-fit: contain; /* Fit logo in the image size */
        -o-object-fit: contain; /* Fit logo fro opera browser */
    object-position: top; /* Set logo position */
        -o-object-position: top; /* Logo position for opera browser */
    }

<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

https://jsfiddle.net/sot2qgj6/3/

Aqui está a resposta se você deseja colocar uma imagem com porcentagem fixa de largura , mas não pixel fixo de largura .

E isso será útil ao lidar com diferentes tamanhos de tela .

Os truques são

1. Usando padding-toppara definir a altura da largura.
2. Usando position: absolutepara colocar a imagem no espaço de preenchimento.
3. Usando max-height and max-widthpara garantir que a imagem não ultrapasse o elemento pai.
4. usando display:block and margin: autopara centralizar a imagem.

Também comentei a maioria dos truques dentro do violino.

Também encontro outras maneiras de fazer isso acontecer. Não haverá imagem real em html, então eu pessoalmente prefiro a resposta principal quando preciso do elemento "img" em html.

css simples usando o plano de fundo http://jsfiddle.net/4660s79h/2/

imagem de fundo com a palavra no topo http://jsfiddle.net/4660s79h/1/

o conceito de usar posição absoluta é daqui http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Você pode usar isto:

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

Você pode criar uma div como esta:

<div class="image" style="background-image:url('/to/your/image')"></div>

E use este css para estilizá-lo:

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover

Sugiro que, para uma abordagem responsiva, a melhor prática seja usar as unidades Viewport e os atributos min / max da seguinte maneira:

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}

Isso reduzirá a imagem se ela for muito grande para a área especificada (como desvantagem, ela não aumentará a imagem).

A solução da setec é adequada para "Reduzir para caber" no modo automático. Mas, para otimizar a EXPANDIR para caber no modo 'automático', você precisa primeiro colocar a imagem recebida em um ID de temperatura. Verifique se ela pode ser expandida em altura ou largura (dependendo da razão de aspecto em relação à proporção de seu bloco de exibição),

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 

    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

Essa abordagem é útil quando as imagens recebidas são menores que a caixa de exibição. Você deve salvá-los em seu servidor no tamanho Original Pequeno, em vez da versão expandida, para preencher a Caixa de exibição Maior e economizar em tamanho e largura de banda.

Que tal usar um pseudo-elemento para alinhamento vertical? Este código a menos é para um carrossel, mas acho que funciona em todos os contêineres de tamanho fixo. Ele mantém a proporção e insere @ barras cinza-escuras na parte superior / inferior ou esquerda / gravação para a dimensão mais curta. Enquanto isso, a imagem é centralizada horizontalmente pelo alinhamento do texto e verticalmente pelo pseudo-elemento.

    > li {
      float: left;
      overflow: hidden;
      background-color: @gray-dark;
      text-align: center;

      > a img,
      > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: auto;
        text-align: center;
      }

      // Add pseudo element for vertical alignment of inline (img)
      &:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }

Apresentação em tela cheia:

img[data-attribute] {height: 100vh;}

Lembre-se de que, se a altura da porta de visualização for maior que a imagem, a imagem degradará naturalmente em relação à diferença.

Penso, finalmente, que esta é a melhor solução, fácil e simples :

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}