Imagem(fortnite) em destaque

Boa tarde Vanessa, tudo bem?

No seu caso, a imagem provavelmente tá se ajustando responsivamente, mas não está sendo redimensionada proporcionalmente. Isso significa que a largura da imagem está diminuindo para caber na tela, mas a altura está sendo mantida, o que resulta em faixas pretas na parte superior e inferior.

Pra resolver esse problema, você pode utilizar a propriedade object-fit do CSS. Essa propriedade permite definir como a imagem deve se adaptar ao seu container.

Existem três valores principais para a propriedade object-fit:

• cover: A imagem será redimensionada para cobrir completamente o container, cortando as partes que não cabem. Essa opção é útil se você deseja que a imagem preencha todo o espaço disponível, mesmo que isso signifique cortar partes da imagem.
• contain: A imagem será redimensionada para caber dentro do container sem ser cortada. Se a imagem não for grande o suficiente para preencher todo o container, ela ficará centralizada com bordas brancas ao redor.
• fill: A imagem será redimensionada para preencher todo o container mantendo a proporção original. Se a imagem não for grande o suficiente para preencher todo o container, ela será redimensionada para cima ou para baixo, mas nunca será cortada.

No seu caso, a melhor opção provavelmente seria usar o valor fill. Isso garantirá que a imagem seja redimensionada proporcionalmente para caber no container, sem faixas pretas.

img {
  object-fit: fill;
}

Espero que te ajude.