0

Eu tenho uma imagem 1220x780 e quero colocar ela em um container de 341x192, como faço para que ela apareça ajustada, centralizada, em "miniatura", estou usando

 max-width: ;
 max-height:;
 width: auto;
 height: auto;

Mas nela não ajusta horizontalmente

1 Resposta 1

1

vamos pegar por exemplo esta imagem.:

Ela tem 512 x 512, então vamos colocar a mesma dentro de um contêiner de 256 x 128

.box {
  float: left;
  width: 256px;
  height: 128px;
  margin: 10px 5px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px black;
  overflow: hidden;
}

.bg {
  background-image: url('https://image.flaticon.com/icons/png/512/944/944939.png');
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
<div class="box">
  <div class="bg"></div>
</div>

<div class="box">
  <img src="https://image.flaticon.com/icons/png/512/944/944939.png" class="img" />
</div>

Ou seja, podemos fazer este posicionamento utilizando o background-size: cover; background-position: center; para imagens em background ou o object-fit: cover; para imagens.

agora se você quiser manter a proporção da imagem e não corta-la, poderá usar o contain ao invés do cover.

.box {
  float: left;
  width: 256px;
  height: 128px;
  margin: 5px 5px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px black;
  overflow: hidden;
}

.bg {
  background-image: url('https://image.flaticon.com/icons/png/512/944/944939.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
}

.img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
<div class="box">
  <div class="bg"></div>
</div>

<div class="box">
  <img src="https://image.flaticon.com/icons/png/512/944/944939.png" class="img" />
</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 .