Como redimensionar automaticamente uma imagem grande para que ela caiba em um contêiner div de largura menor, mantendo a proporção largura: altura?

Exemplo: stackoverflow.com - quando uma imagem é inserida no painel do editor e a imagem é muito grande para caber na página, a imagem é redimensionada automaticamente.

Não aplique uma largura ou altura explícita à tag da imagem. Em vez disso, dê:

max-width:100%;
max-height:100%;

Além disso, height: auto;se você desejar especificar apenas uma largura.

Exemplo: http://jsfiddle.net/xwrvxser/1/

img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

ajuste de objeto

Acontece que há outra maneira de fazer isso.

<img style='height: 100%; width: 100%; object-fit: contain'/>

fará o trabalho. É coisa de CSS 3.

Fiddle: http://jsfiddle.net/mbHB4/7364/

Atualmente, não há como fazer isso corretamente de maneira determinística, com imagens de tamanho fixo, como arquivos JPEG ou PNG.

Para redimensionar uma imagem proporcionalmente, você tem que definir tanto a altura ou largura para "100%", mas não ambos. Se você definir "100%", sua imagem será ampliada.

A escolha da altura ou largura depende das dimensões da imagem e do contêiner:

1. Se a sua imagem e o contêiner forem "em forma de retrato" ou "em forma de paisagem" (mais altos que largos ou mais largos, respectivamente), não importa qual altura ou largura seja "% 100" .
2. Se sua imagem é retrato e seu contêiner é paisagem, você deve defini height="100%"-la.
3. Se sua imagem é paisagem e seu contêiner é retrato, você deve defini width="100%"-la.

Se sua imagem for um SVG, que é um formato de imagem vetorial de tamanho variável, você poderá fazer a expansão para ajustar-se ao contêiner automaticamente.

Você só precisa garantir que o arquivo SVG não tenha nenhuma dessas propriedades definidas na <svg>tag:

height
width
viewbox

A maioria dos programas de desenho vetorial lá fora definirá essas propriedades ao exportar um arquivo SVG; portanto, você deverá editar manualmente o arquivo toda vez que exportar ou escrever um script para fazê-lo.

Aqui está uma solução que alinhará vertical e horizontalmente o img dentro de uma div sem alongar, mesmo que a imagem fornecida seja muito pequena ou muito grande para caber na div.

O conteúdo HTML:

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

O conteúdo CSS:

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

A parte do jQuery:

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

Simplifique!

Dê ao contêiner um número fixo height e, em seguida, para a imgtag dentro dele, defina widthe max-height.

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

A diferença é que você define width100%, não o max-width.

Um belo truque.

Você tem duas maneiras de tornar a imagem responsiva.

1. Quando uma imagem é uma imagem de fundo.

#container{
    width: 300px;
    height: 300px;
    background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

Execute aqui

2. Quando a imagem está na imgetiqueta.

#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

Execute aqui

Você pode definir a imagem como plano de fundo para uma div e usar a propriedade CSS background-size :

background-size: cover;

Ele irá "Dimensionar a imagem de fundo para que seja a maior possível, para que a área de fundo fique completamente coberta pela imagem de fundo. Algumas partes da imagem de fundo podem não estar visíveis dentro da área de posicionamento de fundo" - W3Schools

Confira minha solução: http://codepen.io/petethepig/pen/dvFsA

Está escrito em CSS puro, sem nenhum código JavaScript. Ele pode lidar com imagens de qualquer tamanho e orientação.

Dado esse HTML:

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

o código CSS seria:

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

Acabei de publicar um plugin jQuery que faz exatamente o que você precisa com várias opções:

https://github.com/GestiXi/image-scale

Uso:

HTML

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

Javascript

$(function() {
    $("img.scale").imageScale();
});

Essa solução não estica a imagem e preenche todo o contêiner, mas corta parte da imagem.

HTML:

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}

Vejo que muitas pessoas sugeriram o ajuste de objetos, o que é uma boa opção. Mas se você deseja que ele funcione também em navegadores antigos , há outra maneira de fazê-lo facilmente.

É bem simples. A abordagem adotada foi posicionar a imagem dentro do contêiner com absoluta e, em seguida, colocá-la no centro usando a combinação:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Uma vez no centro, dou a imagem,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Isso faz com que a imagem obtenha o efeito de Object-fit: cover.

Aqui está uma demonstração da lógica acima.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Essa lógica funciona em todos os navegadores.

O seguinte funciona perfeitamente para mim:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

Eu tenho uma solução muito melhor sem a necessidade de qualquer JavaScript. É totalmente responsivo, e eu o uso muito. Você geralmente precisa ajustar uma imagem de qualquer proporção a um elemento de contêiner com uma proporção especificada. E ter tudo isso totalmente responsivo é uma obrigação.

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}

<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

Você pode definir largura máxima e altura máxima de forma independente; a imagem respeitará a menor (dependendo dos valores e da proporção da imagem). Você também pode definir a imagem para alinhar como desejar (por exemplo, para uma imagem do produto em um fundo branco infinito, você pode posicioná-la no centro da parte inferior com facilidade).

Dê a altura e a largura necessárias para a sua imagem à div que contém a tag <img>. Não se esqueça de fornecer a altura / largura na etiqueta de estilo adequada.

Na tag <img>, dê max-heighte max-widthcomo 100%.

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

Você pode adicionar os detalhes nas classes apropriadas depois de acertar.

O código abaixo é adaptado das respostas anteriores e é testado por mim usando uma imagem chamada storm.jpg.

Este é o código HTML completo para uma página simples que exibe a imagem. Isso funciona perfeitamente e foi testado por mim em www.resizemybrowser.com. Coloque o código CSS na parte superior do seu código HTML, abaixo da seção principal. Coloque o código da imagem onde quiser.

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>

<style type="text/css">
    #container{
        text-align: center;
        width: 100%;
        height: 200px; /* Set height */
        margin: 0px;
        padding: 0px;
        background-image: url('../assets/images/img.jpg');
        background-size: content; /* Scaling down large image to a div */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container>
    <!-- Inside container -->
</div>

Você precisa informar ao navegador a altura de onde o está colocando:

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Editar: O posicionamento anterior da imagem baseada em tabela teve problemas no Internet Explorer 11 ( max-heightnão funciona em display:tableelementos). Substituí-lo pelo posicionamento baseado em linha, que não só funciona bem no Internet Explorer 7 e no Internet Explorer 11, mas também requer menos código.

Aqui está minha opinião sobre o assunto. Só funcionará se o contêiner tiver um tamanho especificado ( max-widthe max-heightnão parecer se dar bem com contêineres que não tenham tamanho concreto), mas escrevi o conteúdo CSS de uma maneira que permita sua reutilização (adicionar picture-frameclasse e px125classe de tamanho para o contêiner existente).

Em CSS:

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

E em HTML:

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

DEMO

/* Main style */

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px32
{
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

/* Extras */

.picture-frame
{
    padding: 5px;
}

.frame
{
    border:1px solid black;
}

<p>32px</p>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>

Editar: Possível melhoria adicional usando JavaScript (aumento da escala de imagens):

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});

Corrigi esse problema usando o seguinte código:

<div class="container"><img src="image_url" /></div>

.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}

Conforme respondido aqui , você também pode usar vhunidades em vez de max-height: 100%não funcionar no navegador (como o Chrome):

img {
    max-height: 75vh;
}

Centralizei e dimensionei proporcionalmente uma imagem dentro de um hiperlink horizontal e verticalmente desta maneira:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

Foi testado no Internet Explorer, Firefox e Safari.

Mais informações sobre centralização estão aqui .

A resposta aceita do Thorn007 não funciona quando a imagem é muito pequena .

Para resolver isso, adicionei um fator de escala . Dessa forma, aumenta a imagem e preenche o contêiner div.

Exemplo:

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>

Notas:

1. Para o WebKit, você deve adicionar -webkit-transform:scale(4); -webkit-transform-origin:left top;o estilo.
2. Com um fator de escala de 4, você tem largura máxima = 400/4 = 100 e altura máxima = 200/4 = 50
3. Uma solução alternativa é definir a largura máxima e a altura máxima em 25%. É ainda mais simples.

Se você estiver usando o Bootstrap, basta adicionar a img-responsiveclasse à imgtag:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Imagens de Bootstrap

Uma solução simples (correção em quatro etapas !!) que parece funcionar para mim está abaixo. O exemplo usa a largura para determinar o tamanho geral, mas você também pode inverter para usar a altura.

1. Aplique estilo CSS ao contêiner de imagem (por exemplo, <img>)
2. Defina a propriedade width para a dimensão desejada
   • Para dimensões, use %para tamanho relativo ou dimensionamento automático (com base no recipiente ou na imagem da imagem)
   • Use px(ou outro) para uma dimensão estática ou definida
3. Defina a propriedade height para ajustar automaticamente, com base na largura
4. DESFRUTAR!

Por exemplo,

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>

Todas as respostas fornecidas, incluindo a aceita, funcionam apenas sob a suposição de que o divwrapper é de tamanho fixo. Portanto, é assim que se faz, seja qual for o tamanho do divwrapper, e isso é muito útil se você desenvolver uma página responsiva:

Escreva estas declarações dentro do seu DIVseletor:

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

Em seguida, coloque estas declarações dentro do seu IMGseletor:

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

MUITO IMPORTANTE:

O valor de maxHeightdeve ser o mesmo para os seletores DIVe IMG.

Uma solução simples é usar o flexbox. Defina o CSS do contêiner para:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

Ajuste a largura da imagem contida para 100% e você deverá obter uma boa imagem centralizada no contêiner com as dimensões preservadas.

A solução é fácil com um pouco de matemática ...

Basta colocar a imagem em uma div e, em seguida, no arquivo HTML onde você especifica a imagem. Defina os valores de largura e altura em porcentagens usando os valores de pixel da imagem para calcular a proporção exata de largura e altura.

Por exemplo, digamos que você tenha uma imagem com largura de 200 pixels e altura de 160 pixels. Você pode dizer com segurança que o valor da largura será 100%, porque é o valor maior. Para calcular o valor da altura, basta dividir a altura pela largura que fornece o valor percentual de 80%. No código, será algo parecido com isto ...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

A maneira mais simples de fazer isso é usando object-fit:

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

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

Se você estiver usando o Bootstrap, basta adicionar a img-responsiveclasse e mudar para

.container img{
    object-fit: cover;
}

Verifique minha resposta, Torne uma imagem responsiva - de maneira mais simples -

img{
    width: 100%;
    max-width: 800px;
}

Ou você pode simplesmente usar:

background-position:center;
background-size:cover;

Agora a imagem ocupará todo o espaço da div.