Hintergrundbild für Flex-Container erstellen

Question

Ich habe Flexbox verwendet, um ein Raster zu erstellen, mit dem 3 Bilder nebeneinander ausgerichtet werden können. Ich habe ihnen eine Breite von 33,333% gegeben, damit sie genau passen.

Aber jetzt möchte ich einen CSS-Hover-Effekt vorstellen, wo ein anderes Bild eingeblendet wird, wenn Sie den Mauszeiger über ein Bild bewegen.

Ich habe den Effekt funktioniert gut, aber das Problem, das ich habe ist, dass das Bild, das auf Hover eingeblendet wird zu groß ist und als Ergebnis nur etwa 75% davon im Container erscheint.

Ich habe den Code für den Fade-Effekt here, aber obwohl ich den Code manipulieren konnte, kann ich das Bild nicht genau zu 100% in den Container passen. Beide Bilder haben genau die gleichen Abmessungen.

.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>

Answer 1

Try background-size: cover; auf .crossfd Klasse hinzufügen.

Sie können auch versuchen contain oder 100%, lesen Sie die Spezifikation auf MDN.

Die CSS-Eigenschaft background-size gibt die Größe der Hintergrundbilder an. Die Größe des Bildes kann vollständig oder nur teilweise eingeschränkt werden, um sein intrinsisches Verhältnis zu bewahren.