Em HTML e CSS está aparecendo um espaço branco abaixo da imagem, veja o exemplo, o erro é esse espaço branco entre a imagem e a caixa preta
.div1{
width: auto;
height: auto;
display: block;
}
.div2{
width: 100%;
height: 40px;
display: block;
background-color: #000000;
}
<div class="div1">
<img src="https://i.sstatic.net/stNlx.jpg">
</div>
<div class="div2"></div>
Como resolver?
<img>
é completamente diferente de inserí-la como background de um elemento. Não são soluções equivalentes e, portanto, uma não substitui a outra.