Fazer com que a imagem de fundo se encaixe no contentor flex

Question

Fazer com que a imagem de fundo se encaixe no contentor flex

usei o flexbox para criar uma grelha que permite 3 imagens alinhadas lado a lado. Dei-lhes uma largura de 33.333%, por isso encaixam exactamente.

No entanto, agora quero introduzir um efeito de hover css onde outra imagem se desvanece quando você paira sobre uma imagem.

Tenho o efeito de trabalhar bem, mas a questão que estou a ter é que a imagem que se desvanece no hover é demasiado grande e, como resultado, apenas cerca de 75% dela aparece no recipiente.

Tenho o código para ... o efeito de desvanecimento Aqui, mas embora eu tenha estado a manipular o código, não consigo que a imagem se encaixe exactamente a 100% no contentor. Ambas as imagens são exactamente as mesmas dimensões.

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 33.333%;
}

.bord {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
}

.crossfd {
  background: url("https://picsum.photos/200/200?image=0");
  display: inline-block;
}

.crossfd img {
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.crossfd img:hover {
  opacity: 0;
}

<div class="container">
  <div class="box bord crossfd">
    <img src="https://picsum.photos/200/300?image=1" width="100%" alt="Lou" />
  </div>
  <div class="box bord crossfd">
    <img src="https://picsum.photos/200/300?image=2" width="100%" alt="Lou" />
  </div>
  <div class="box bord crossfd">
    <img src="https://picsum.photos/200/300?image=3" width="100%" alt="Lou" />
  </div>
</div>

2

html css background-image css3 flexbox

Author: Community, 2016-07-10

Source

1 answers

score 7 · Accepted Answer

Tente adicionar {[[0]} na classe .crossfd.

Você também pode tentar contain ou 100%, ler o spec em MDN .

A propriedade background-size CSS especifica o tamanho das imagens de fundo. O tamanho da imagem pode ser totalmente restringido ou apenas parcialmente, a fim de preservar a sua razão intrínseca.