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

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?

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.

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

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

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

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

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

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/

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

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

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

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.

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.

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.

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.