CSS: 100% de largura ou altura, mantendo a proporção?

174

Atualmente, com STYLE, posso usar width: 100%e autona altura (ou vice-versa), mas ainda não consigo restringir a imagem a uma posição específica, seja muito larga ou muito alta, respectivamente.

Alguma ideia?

Weston Watson
fonte
3
você pode postar um link ou captura de tela para mostrar um exemplo do problema?
Mauro

Respostas:

138

Se você definir apenas uma dimensão em uma imagem, a proporção da imagem será sempre preservada.

O problema é que a imagem é maior / mais alta do que você prefere?

Você pode colocá-lo dentro de um DIV que esteja definido como a altura / largura máxima que você deseja para a imagem e, em seguida, definir estouro: oculto. Isso cortaria qualquer coisa além do que você deseja.

Se uma imagem tem 100% de largura e altura: auto e você acha que é muito alta, é porque a proporção é preservada. Você precisará cortar ou alterar a proporção.

Forneça mais algumas informações sobre o que você está especificamente tentando realizar e tentarei ajudar mais!

--- EDITAR BASEADO NO FEEDBACK ---

Você conhece as propriedades max-width e max-height ? Você sempre pode configurá-los. Se você não definir um mínimo e definir uma altura e largura máximas, sua imagem não será distorcida (a proporção será preservada) e não será maior do que a dimensão que for mais longa e atingir seu máximo.

Andrew
fonte
16
se a imagem for mais alta do que larga, eu usaria height = 100% e width = auto; se a imagem for mais larga do que alta, eu usaria width = 100%, height = auto. eu simplesmente nunca sei qual é o caso? cortar pela altura / largura máximas funcionaria - mas se houver uma maneira de não - eu prefiro usar isso ...
Weston Watson
2
Bem, você está projetando um layout fluido ou de largura fixa? Se você estiver em um layout de largura fixa, sempre poderá definir sua largura para 100% e a imagem será dimensionada adequadamente, mas pode ser muito alta. Você está tentando posicionar uma imagem em um bloco de texto ou usá-la como banner ou como plano de fundo? Se você pudesse mostrar a página onde planeja usá-la ou descrever o contexto, eu poderia ajudá-lo mais. Veja as edições acima também.
Andrew
usar a altura máxima no meu img me permitiu restringir as imagens enquanto mantinha sua proporção
northamerican
2
object-fitnão adianta?
LeeGee
77

Alguns anos depois, procurando o mesmo requisito, encontrei uma opção CSS usando o tamanho do plano de fundo.

Ele deve funcionar em navegadores modernos (IE9 +).

<div id="container" style="background-image:url(myimage.png)">
</div>

E o estilo:

#container
{
  width:  100px; /*or 70%, or what you want*/
  height: 200px; /*or 70%, or what you want*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

A referência: http://www.w3schools.com/cssref/css3_pr_background-size.asp

E a demonstração: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

conca
fonte
3
a solução ideal, que infelizmente não é suportada pelo IE8 :(
japrescott
Essa é a solução ideal, mas se você fizer isso em carrosséis, as imagens ficarão em branco por um segundo após cada slide.
kloddant
58

Ao definir a max-widthpropriedade CSS como 100%, uma imagem preencherá a largura do elemento parental, mas não será maior que o tamanho real, preservando a resolução.

Definir a heightpropriedade para automanter a proporção da imagem, usando esta técnica, permite que a altura estática seja substituída e permite que a imagem se flexione proporcionalmente em todas as direções.

img {
    max-width: 100%;
    height: auto;      
}
Adam Waite
fonte
1
ainda definir heighta autocausas RefLOW quando a imagem é lançada
Gregory Pakosz
42

Solução de trabalho elegante simples:

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
user3334941
fonte
3
Obrigado por me lembrar object-fit. Exatamente o que eu precisava.
Ash Clarke
5
Esta é uma solução ideal, mas infelizmente object-fitnão é suportada em nenhuma versão do IE nem do Edge a partir de 28 de março de 2017.
Simon G
2
A partir de março de 2019, esse recurso terá 90% de suporte - portanto, essa deve ser considerada a resposta correta.
Hampus Ahlgren
Além disso, observe que object-fit: containe object-fit: covernão gosta widthcomo 100% - você deve usar unidades de concreto comopx
FlameStorm
Eu tentei object-fitcom max-widthe max-heightcomo usado em outras respostas, mas isso não funcionou. isso funciona perfeitamente para tamanhos de imagem aleatórios, mesmo com widtheheight 100%
Halfacht
27

Teve o mesmo problema. O problema para mim era que a propriedade height também já estava definida em outro lugar, corrigida assim:

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}
Flo
fonte
Exatamente o que eu estava procurando. Graças a um milhão de caras.
London Smith
Perfeito onde o tamanho da imagem pode ser menor ou maior que a div principal e será redimensionado para o centro perfeito com largura máxima OU altura máxima. Você não precisa usar a imagem como plano de fundo, que apenas sobrecarregará o pai se definido como "cover".
Rehmat
9

Solução simples:

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

A propósito, se você quiser centralizá-lo em um contêiner div pai, poderá adicionar essas propriedades css:

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

Realmente deve funcionar como esperado :)

Alexis K
fonte
votou na primeira parte. segunda parte não funcionou para mim ... :(
Vikas Bansal
Apenas um problema - se a imagem for maior que 100% do contêiner, ela se espalhará e exigirá barras de rolagem ou recorte. Não tenho certeza, como conseguir o mesmo e ainda limitar o tamanho máximo ao contêiner. Se definir largura e altura máximas, não preservará mais a proporção.
JustAMartin
5

Uma das respostas inclui a instrução background-size: contains css, que eu gosto muito, porque é uma declaração direta do que você deseja fazer e o navegador apenas o faz.

Infelizmente, mais cedo ou mais tarde, você precisará aplicar uma sombra que, infelizmente, não funcionará bem com as soluções de imagem de fundo.

Então, digamos que você tenha um contêiner que seja responsivo, mas que tenha limites bem definidos para largura e altura mín e máx.

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

E o contêiner possui um img que deve estar ciente dos pixels da altura do contêiner para evitar obter uma imagem muito alta que transborda ou é cortada.

O img também deve definir uma largura máxima de 100%, a fim de permitir primeiro que larguras menores sejam renderizadas e, em segundo lugar, com base em porcentagem, o que a torna paramétrica.

.photo > img {
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}

Note que ele tem uma boa sombra;)

Desfrute de um exemplo ao vivo neste violino: http://jsfiddle.net/pligor/gx8qthqL/2/

George Pligoropoulos
fonte
Saúde - exatamente o que eu estava procurando.
Eli
Obrigado por essas soluções e pelo link jsdfiddle. Na verdade, isso funcionou para a minha galeria de imagens reativas, onde eu uso as duas: imagens com maior altura e imagens com maior largura. :)
Eugenijus S.
4

Eu uso isso para um contêiner retangular com altura e largura fixas, mas com imagens de tamanhos diferentes.

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}
Alejandro Salamanca Mazuelo
fonte
3

É melhor usar automático na dimensão que deve respeitar a proporção. Se você não definir a outra propriedade como automática, a maioria dos navegadores atualmente assumirá que você deseja respeitar a proporção do aspecto, mas não todos (o IE10 no Windows Phone 8 não, por exemplo)

width: 100%;
height: auto;
Davy
fonte
2

Esta é uma solução muito simples que surgiu depois de seguir o link do conca e analisar o tamanho do plano de fundo. Ele explode a imagem e a encaixa no centro do recipiente externo sem redimensioná-la.

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />
Bill Davis
fonte
Solução boa e inteligente! Com os 40% adicionais, você compensa a proporção. Obrigado!
Sascha
Você também pode usar apenas background-size: contain;para ajustar a imagem em segundo plano.
Simon G
1

Para não pular para um problema antigo, mas ...

#container img {
      max-width:100%;
      height:auto !important;
}

Mesmo que isso não seja adequado, pois você usa a substituição! Important na altura, se você estiver usando um CMS como o WordPress que defina a altura e a largura para você, isso funcionará bem.

Levi G
fonte
1

Hoje em dia um pode usar vwe vhunidades, que representam 1% do v iewport de w IDþ e h oito, respectivamente.

https://css-tricks.com/fun-viewport-units/

Então, por exemplo:

img {
  max-width: 100vw;
  max-height: 100vh;
}

... tornará a imagem a mais larga possível, mantendo a proporção, mas sem ser maior ou maior que 100% da janela de visualização.

Jonas Berlin
fonte
0

Use JQuery ou algo assim, pois CSS é um equívoco geral (as inúmeras perguntas e discussões aqui sobre objetivos simples de design mostram isso).

Não é possível com CSS fazer o que você deseja: a imagem deve ter largura de 100%, mas se essa largura resultar em uma altura muito grande, será aplicada uma altura máxima - e, é claro, as proporções corretas serão preservado.

Ungesund
fonte
-2

Eu acho que é isso que você está procurando, eu estava procurando por mim mesmo, mas depois lembrei novamente antes de encontrar o código.

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

a evolução digital está a caminho.

Peter Gruppelaar
fonte