3

Estou com uma dúvida a respeito de divs com imagens dentro, no caso, a dúvida é a seguinte:

  • Se eu tenho uma div, com 400x400, como faço para que uma imagem com 200x400 (ou outra resolução) caiba ocupando o tamanho total da div, sem distorcer a imagem, e sem usar o background do css

Por exemplo:

*a primeira imagem é como seria o resultado final, da forma como dito, o segundo é como ele fica normalmente, a imagem inteira é colocada na div, sempre sobrando espaço em branco, tanto vertical, como horizontal, sendo que a imagem deveria ser ajustada de acordo com o tamanho da div.

inserir a descrição da imagem aqui

2 Respostas 2

2

A imagem que vou usar para teste tem a resolução 500x375 então eu faria da seguinte forma:

img {
  width: 400px;
  height: 400px;
  object-fit: cover;
}
<img src="http://dicasdeboleiro.com.br/wp-content/uploads/2013/06/Dicas-de-dribles-de-futebol-2.jpg">

Observe a propriedade object-fit: cover ela que da este efeito na imagem como se fosse um background-size: cover veja mais em:
https://developer.mozilla.org/pt-BR/docs/Web/CSS/object-fit

Obs. Sem a propriedade object-fit: cover a imagem fica distorcida.

3
  • Problema é os navegadores suportados. Mas é uma boa opção quando todo o mundo deixar de usar IE. Commented 10/01/2017 às 15:19
  • @Zooboomafoo realmente o IE e o EDGE são um problema como sempre kkk porém esta propriedade usando prefixos já é suportada por 91.5% dos browsers no Brasil segundo caniuse.com/#search=object-fit Commented 10/01/2017 às 15:25
  • Chique 10 mesmo. Vou começar a utilizar. Commented 10/01/2017 às 15:32
1

Poderá usar o overflow: hidden no elemento que envolve a imagem para que a imagem fique dentro dos limites estabelecidos. E na imagem pode subtrair as margens 50% (metade de 100%), em cima e em baixo.

.imagem-1 {
  width: 400px;
  height: 400px;
  overflow: hidden;
}
.imagem-1 img {
  width: 100%;
  margin-top: -50%;
  margin-bottom: -50%;
}
<div class="imagem-1">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200x400&w=200&h=400">
</div>

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 .