Crie uma largura de imagem 100% da div principal, mas não maior que sua própria largura

125

Estou tentando fazer com que uma imagem (colocada dinamicamente, sem restrições de dimensões) seja tão larga quanto sua div principal, mas apenas enquanto essa largura não for maior que sua própria largura em 100%. Eu tentei isso, sem sucesso:

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

Muitas dessas imagens são muito mais amplas que a div principal, e é por isso que eu gostaria que elas fossem redimensionadas de acordo, mas quando uma pequena imagem aparece e é ampliada além de suas dimensões normais, ela realmente parece terrível. Existe alguma maneira de fazer isso?

html width css Alfonso
fonte
5
O que acontece se você especificar apenas max-width: 100%?
Fyodor Soikin
@Fyodor Soikin - Dê isso como resposta e eu votarei em você.
Gert Grenander
Seria bom considerar quais navegadores suportam largura máxima, no entanto.
precisa saber é o seguinte
O kbrimington traz um bom argumento para a mesa. De acordo com reference.sitepoint.com/css/max-width#compatibilitysection A implementação do IE8 é incorreta.
Alfonso

Respostas:

221

Apenas especifique max-width: 100%sozinho, isso deve ser o caso.

Fyodor Soikin
fonte
1
O cromo parece simplesmente deixá-lo em 100%, independentemente do contexto. Talvez eu deva parar de olhar constantemente para o meu trabalho no software beta. Obrigado!
Alfonso
Como você faz isso sem usar a largura máxima: 100%. No React-Native, não é possível usar porcentagens.
Croolsby
@Croolsby você pode usar porcentagem em react-native, mas com valor de string, como este '100%' #
Rafael Hovsepyan
9

Encontrei este post em uma pesquisa no Google e resolvi meu problema graças à resposta @jwal, mas fiz uma adição à sua solução.

img.content.x700 {
  width: auto !important; /*override the width below*/
  width: 100%;
  max-width: 678px;
  float: left;
  clear: both;
}

Com o exposto, alterei a largura máxima para as dimensões do contêiner de conteúdo em que minha imagem se encontra. Nesse caso, é: largura do contêiner - preenchimento - borda = largura máxima

Dessa forma, minha imagem não sairá da div que contém e ainda posso flutuar a imagem dentro da div de conteúdo.

Testei no IE 9, FireFox 18.0.2 e Chrome 25.0.1364.97, Safari iOS e parece funcionar.

Adicional: testei isso em uma imagem com 1024px de largura exibida em 678px (largura máxima) e uma imagem com 500px de largura exibida em 500px (largura da imagem).

Mattauckland
fonte
1
Usando width:auto !important;um problema corrigido no IE11 para mim, a imagem seria maior que seu contêiner e o IE11 não estava diminuindo a escala da imagem. Definir isso no imgseletor classificou o problema no IE11. No entanto, a configuração width:100%;sem a outra regra não fez nada no IE11. Portanto, a "substituição" deve ser incluída para que a imagem seja reduzida ao tamanho de seu contêiner.
Lowtechsun
3

Definir uma largura de 100% é a largura total da div em que está, não a imagem original em tamanho normal. Não há como fazer isso sem JavaScript ou outra linguagem de script que possa medir a imagem. Se você pode ter uma largura ou altura fixa da div (como 200px de largura), não deve ser muito difícil definir um intervalo para a imagem ser preenchida. Mas se você colocar uma imagem de 20x20 pixels em uma caixa de 200x300 pixels, ela continuará distorcida.

Amanda
fonte
1
forneça um exemplo de trabalho sempre que possível. Isto é recomendado. :)
bhb
1

No estilo de linha - isso funciona sempre para mim

<div class="imgWrapper">
    <img src="/theImg.jpg" style="max-width: 100%">
</div>
Nelles
fonte
0

Você deve definir a largura máxima e, se quiser, também pode definir um preenchimento em um dos lados. No meu caso, a largura máxima: 100% foi boa, mas a imagem estava ao lado do final da tela.

  max-width: 100%;
  padding-right: 30px;
  /*add more paddings if needed*/
Combinar
fonte
0

Eu também estava tendo o mesmo problema, mas configurei o valor da altura no meu CSS como automático e isso corrigiu o meu problema. Além disso, não esqueça de fazer a propriedade display.

  #image {
      height: auto;
      width: auto;
      max-height: 550px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      display: block;
 }
Noah Franco
fonte
apenas um fyi..você pode remover a altura: auto e largura: auto. a altura máxima e a largura máxima são a mesma coisa.
Debbie Kurth
-1

Se a imagem for menor que a principal ...

.img_100 {
  width: 100%;
}
SandroMarques
fonte
-4

Eu usaria a propriedade display: table-cell

Aqui está o link

allsyed
fonte