Como redimensionar automaticamente uma imagem para caber em um contêiner 'div'?


1513

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.


Algumas bibliotecas interessantes para fazer redimensionamento da imagem para caber o recipiente: * plugins.jquery.com/project/myimgscale * code.google.com/p/jquery-imagefit-plugin
Frosty Z

Além da resposta de Kevin ... Você também pode usar serviços como o ImageBoss para criar suas imagens com o tamanho desejado, sob demanda. Ajustar a imagem no contêiner é ótimo, mas servir imagens responsivas é uma maneira muito útil.
Igor Escobar


@jolumg Não é bem assim; Embora exista muita sobreposição em algumas soluções, também existem muitas que não são intercambiáveis, pois essa pergunta como aumentar a escala de uma imagem, enquanto essa pergunta diminui a escala.
precisa saber é o seguinte

1
001 - Esta é uma resposta à sua pergunta que foi encerrada antes que eu a visse. Como chamar um componente filho de um componente pai. Eu escrevi uma postagem no blog explicando como fazer com que os componentes se comuniquem usando interfaces: datajugglerblazor.blogspot.com/2020/01/…
Data Juggler

Respostas:


1876

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>


40
Isso não escalará a altura e a largura.
Neil

75
altura: auto; se você quiser especificar uma largura única
Roi

82
E se a imagem for muito pequena?
Scott Rippey

18
@ Scott Rippey - Se a imagem for menor que o contêiner, ela não será alterada porque as regras usadas são largura e altura máx.
Surreal Dreams

15
Com uma <a>etiqueta anexa , a imagem não foi redimensionada. A aplicação das regras à marca A resolveu esse problema.
SPRBRN

433

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/


39
Isso dimensionará a imagem para caber completamente na dimensão maior dentro do contêiner, portanto, a dimensão menor pode não cobrir completamente. Para recortar a dimensão maior, useobject-fit: cover
Gabriel Grant

4
Trabalhou para mim - comparado à solução do @ KevinD - isso NÃO mudou as proporções em casos extremos. Felicidades!
Barnabas Kecskes

9
Será ótimo quando totalmente suportado. Infelizmente, nem o IE nem o Edge o suportam infelizmente.
spectras

2
Se você deseja definir a largura e a altura máxima, você pode fazer isso. Funciona perfeitamente .
Sandip Subedi

3
Parece que não pode ser usado com IE11 e borda 14/15 embora -> caniuse.com/#search=object-fit
mcorbe

106

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.


2
Sou apenas eu ou existem vários erros neste post? "'em forma de retrato' ou ambos 'em forma de paisagem' (mais largos que altos e altos, respectivamente)" ... ... seus "respeitos" não deveriam ser trocados? E nos pontos 2 e 3, ambos dizem "você deve definir a largura =" 100% "na imagem". Suponho que você copiou e esqueceu de alterar um desses para "altura" em vez de "largura".
Buttle Butkus

Apenas consertei. 2 e 3 podem agora estar ambos errados ou certos, ao invés de um estar errado e outro estar certo. Não me lembro qual é a resposta correta. ;)
Neil

2
"Atualmente, não há como fazer isso corretamente de maneira determinística, com imagens de tamanho fixo, como arquivos JPEG ou PNG."? Isso parece incorreto. @ Resposta de Thorn007 fornece tal forma um, e eu usei-me - stackoverflow.com/questions/12259736/...
Dan Dascalescu

A resposta de @DanDascalescu Thorn007 não expande a imagem se for menor que o contêiner. A melhor solução hoje em dia é usar um elemento com uma imagem de fundo e um conjunto background-size: contain.
Kevin Borders

"Para redimensionar uma imagem proporcionalmente, você deve definir a altura ou a largura como" 100% ", mas não ambas." <Foi exatamente isso que me ajudou. Obrigado
Alexander Santos

77

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

1
CSS funciona exatamente como eu quero, e eu pulei o jQuery mordeu
bkwdesign

48

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.


2
Isso faz com que a proporção da imagem seja alterada no Google Chrome se a imagem for muito alta e a janela de visualização for curta.
Mikko Rantalainen

29

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


Mas deve-se usar imgtag para colocar imagens, pois é melhor do que background-imageem termos de SEO que você pode escrever palavra-chave na altdo imgtag. Então, aqui está você pode tornar a imagem responsiva.

  1. 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


23

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


Acredito que ao "ajustar um contêiner div" o OP significava que a imagem não deveria se estender além do elemento que continha em nenhuma das dimensões. Na solução de @JonatasWalker, a imagem é cortada. Além disso, uma solução em segundo plano pode não estar semanticamente correta, dependendo da situação. Por exemplo, você pode precisar de altvalores e outras coisas (embora também possa adicionar uma imagem fictícia invisível para tecnologias não assistidas) ou pode ser clicável.
Balázs

@ Balázs ah, neste caso, o ajuste correto seria background-size: containe eu acho que eu iria pessoalmente ir a rota imagem manequim só porque não há realmente uma maneira fácil de fazer o que está descrito aqui sem JavaScript
Chuck Dries

@ChuckDries Não sei ao certo o que você quer dizer, a resposta aceita resolve o problema.
Balázs

22

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

2
Isso não lida com imagens muito pequenas.
21413 Josh C

1
@ JoshC Como assim? Este funciona bem: codepen.io/petethepig/pen/maeFo
Dmitry

2
404 nas imagens que são muito pequenas.
Josh C

Eu queria ressaltar que esse método também funciona com contêineres de largura variável. Trabalho impressionante Dmitry!
Camilo Martin

Uma ligeira modificação e é perfeita: codepen.io/anon/pen/BoQmBw Obrigado Dmitry.
Alqin 27/09/2015

10

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

10

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

9

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.


8

O seguinte funciona perfeitamente para mim:

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

7

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).


5

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.


5

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>

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

2
Se você pudesse adicionar alguma explicação do seu código, seria bom (eu sei que você tem alguns comentários, mas apenas algumas palavras sobre por que / como isso responde à pergunta, a aparência seria muito melhor).
display-name-is-missing

5

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

5

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


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

Há uma desvantagem em usar esse método. Se a imagem não carregar, o texto alternativo será exibido no contêiner pai line-height. Se o texto alt tem mais de uma linha, ele vai começar a olhar muito ruim ...
jahu

5

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

4

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

1
Você quer dizervh ? e o que não funciona no Chrome?
MisterManSam

@misterManSam Sim, muito obrigado, estava muito cansado ontem quando publiquei esta resposta. max-height: xx%(unidade percentual) não funciona no Chrome com alguns elementos img, mas a vhunidade funciona. No entanto, os percentuais trabalhar com height, width, max-width, etc.
gaborous

4

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 .


4

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.

1
Esta não é uma solução muito confiável se você estiver tentando oferecer suporte a todo o mercado. Eu evito o CSS3, a menos que você tenha algum tipo de substituto para navegadores que não o suportam.
Dudewad 10/10

4

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


3

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

3

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.


1
A declaração CSS correta é 'max-height' em vez de maxHeight no caso de camelo.
Mark Townsend

3

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.


1

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>

1

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


-1

Ou você pode simplesmente usar:

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

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


1
não se trata de alinhamento, é de redimensioná-lo.
Baljeetsingh
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.