Como encaixo uma imagem (img) dentro de uma div e mantenho a proporção?

Eu tenho uma div de 48x48 e dentro dela existe um elemento img, eu quero encaixá-la na div sem perder nenhuma parte; nesse meio tempo a taxa é mantida, é possível usar html e css?

Você precisará de algum JavaScript para impedir o corte, se não souber a dimensão da imagem no momento em que está escrevendo o css.

HTML e JavaScript

<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

CSS

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

Se você usa uma biblioteca JavaScript, pode tirar proveito dela.

Use max-height:100%; max-width:100%;para a imagem dentro da div.

Infelizmente max-width + max-height não cobrem totalmente minha tarefa ... Por isso, encontrei outra solução:

Para salvar a proporção da imagem durante o dimensionamento, você também pode usar a propriedade object-fitCSS3.

Artigo útil: Controle as proporções da imagem com CSS3

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

Más notícias: IE não suportado ( Posso usar )

Usando apenas CSS:

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

HTML

<div>
    <img src="something.jpg" alt="" />
</div>

CSS

div {
   width: 48px;
   height: 48px;
}

div img {
   display: block;
   width: 100%;
}

Isso fará com que a imagem se expanda para preencher seu pai, cujo tamanho é definido no divCSS.

Eu estava tendo muitos problemas para fazer isso funcionar, todas as soluções que encontrei não pareciam funcionar.

Percebi que eu tinha que definir a exibição div para flex, então basicamente este é o meu CSS:

div{
display: flex;
}

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

Experimente o CSS:

img {
  object-fit: cover;
  height: 48px;
}

Para mim, o seguinte CSS funcionou (testado no Chrome, Firefox e Safari).

Existem várias coisas trabalhando juntas:

• max-height: 100%;, max-width: 100%;E height: auto;, width: auto;tornar a escala img para qualquer dimensão primeiros atinge 100%, mantendo a relação de aspecto
• position: relative;no recipiente e position: absolute;na criança, junto com top: 50%;e left: 50%;centralize o canto superior esquerdo do img no recipiente
• transform: translate(-50%, -50%); move o img de volta para a esquerda e o topo pela metade do seu tamanho, centralizando o img no contêiner

CSS:

.container {
    height: 48px;
    width: 48px;

    position: relative;
}

.container > img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

Definir a foto como imagem de fundo nos dará mais controle sobre tamanho e posicionamento, deixando a tag img para servir a uma finalidade diferente ...

Abaixo, se quisermos que a div tenha a mesma proporção que a foto, placeholder.png é uma pequena imagem transparente com a mesma proporção que photo.jpg. Se a foto é quadrada, é um espaço reservado 1px x 1px, se a foto é uma miniatura de vídeo, é um espaço reservado 16x9 etc.

Específico à pergunta, use um espaço reservado 1x1 para manter a proporção quadrada da div, com uma imagem de plano de fundo usando background-sizepara manter a proporção da foto.

Eu usei background-position: center center;para que a foto seja centralizada na div. (O alinhamento da foto no centro vertical ou na parte inferior ficaria feio com a foto na tag img.)

div {
    background: url(photo.jpg) center center no-repeat;
    background-size: contain;
    width: 48px; // or a % in responsive layout
}
img {
    width: 100%;
}

<div><img src="placeholder.png"/></div>

Para evitar uma solicitação http extra, converta a imagem do espaço reservado em um dado: URL .

<img src="data:image/png;base64,..."/>

você pode usar a classe "img-fluid" para uma versão mais recente, ou seja, o Bootstrap v4 .

e pode usar a classe "img-responsive" para versões mais antigas como o Bootstrap v3 .

Uso : -

img tag com: -

class = "img-fluid"

src = "..."

Aqui está uma abordagem totalmente JavaScript. Escala uma imagem gradualmente para baixo até que ela se encaixe corretamente. Você escolhe quanto diminuir cada vez que falha. Este exemplo reduz 10% cada vez que falha:

let fit = function (el, w, h, percentage, step)
{
    let newH = h;
    let newW = w;

    // fail safe
    if (percentage < 0 || step < 0) return { h: h, w: w };
    if (h > w)
    {
        newH = el.height() * percentage;
        newW = (w / h) * newH;
        if (newW > el.width())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }
    else
    {
        newW = el.width() * percentage;
        newH = (h / w) * newW;
        if (newH > el.height())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }

    return { h: newH, w: newW };
};

img.bind('load', function ()
{
    let h = img.height();
    let w = img.width();
    let newFit = fit($('<img-wrapper-selector>'), w, h, 1, 0.1);

    img.width(newFit.w);
    img.height(newFit.h);
});

Sinta-se livre para copiar e colar diretamente.

O que funcionou para mim foi:

<div style='display: inline-flex; width: 80px; height: 80px;'>
<img style='max-width: 100%; max-height: 100%' src='image file'>
</div>

O inline-flex foi necessário para impedir que as imagens saíssem da div.