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
?
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%;
}
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.
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.
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.