4

Tenho um div com 1184x308px e quero que sejam colocadas dentro imagens que são dinâmicas.

Dado que as imagens podem ser carregadas com qualquer dimensão, como as posso ajustar as dimensões do div?

4 Respostas 4

7

Se a imagem for menor que a dimensão do div, a abordagem do max-width e do max-height não vai funcionar, aí é melhor colocar width: 100%; e brincar com o height para poder acertar imagem. Colocar height: auto; vai fazer a imagem aumentar a altura proporcionalmente. Se você forçar para height: 100%;, a imagem vai ficar desproporcional, mas ocupando toda a altura do div. Mesmo assim, a abordagem do max-width/height é bastante indicada também.

Tente recortar as imagens sempre na proporção que você precisa ou defina um width: auto e height: 100% para fazer a imagem ficar sempre com 100% da altura e largura sempre vai extrapolar o div. Logo, coloque um overflow: hidden na div, para ela não mostrar a parte da imagem que irá transbordar da largura.

div {
    width: 500px;
    height: 200px;
    overflow: hidden; /* Faz o div não aumentar a altura por causa da imagem */
}

img {
    border: 1px solid red;
    width: 100%;
}

http://jsfiddle.net/80yw8h5b/

1
  • 1
    Se quiser você pode criar um snippet aqui no StackOverflow mesmo @DiegoEis: Maiores explicações - É claro, apenas sugestão :) Commented 28/04/2015 às 11:20
2

Pode fazer da seguinte forma:

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

.minha-div {
    height: 50px;
    width: 50px;
}
A minha div
<div class="minha-div">
    <img src="http://www.deshow.net/d/file/animal/2009-07/cute-kitten-631-2.jpg">
</div>

O truque esta em colocar as dimensões máximas (max-width, max-height) da imagem para 100% o que faz com que preencham o div. Caso as imagens sejam mais pequenas, não são afectadas.

-2

Você pode usar background-size: cover, ela vai ocupar o espaço todo. Se a foto for maior que seu container, vai cortar um pouco a imagem, mas ela não vai ficar distorcida, se for menor, ela vai aumentar e ocupar o espaço todo.

1
  • 1
    Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 16/02/2022 às 19:18
-4

No meu código CSS estava da seguinte forma:

figure.foto-legenda {
    position: relative;
    border:  5px solid white;
    width: 100%;
    height: 100%;
    box-shadow: 1px 1px 4px black;

}

figure.foto-legenda img {
    width: 100%;
    height: 100%;
    position: relative;
}

Depois que mudei para os parâmetros max-widht e max-height, ficou na posição correta sem ultrapassar o container.

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .