Imagem muda o posicionamento das coisas na tela

Oii Alamyr, como você está?

Sinto muito pela demora em obter um retorno.

Podemos utilizar uma classe CSS para definirmos o tamanho de altura e largura padrão para a imagem. No código abaixo, deixo um tamanho padrão para as imagens que ficam na rota principal (arquivo index.html), onde a altura terá 200 pixels e a largura terá 330 pixels:

{% include 'partials/_busca.html' %}

{% include 'partials/_menu.html' %}

<style>

    .formata-imagem{
        max-width: 100%;
        width: 330px;
        height: 200px; 
    }

</style>

Agora, basta adicionarmos a classe formata-imagem na tag <img>, responsável por exibir a imagem:

<img src="{{ receita.foto_receita.url }}" alt="" class="formata-imagem">

Antes:

Depois:

Aqui na Alura temos cursos que abordam sobre a estilização de páginas, ou seja, o frontend, a parte visual da aplicação. Segue abaixo as sugestões:

Curso de HTML5 e CSS3 parte 1: A primeira página da Web
Curso de HTML5 e CSS3 parte 2: Posicionamento, listas e navegação
Curso de HTML5 e CSS3 parte 3: Trabalhando com formulários e tabelas
Curso de HTML5 e CSS3 parte 4: Avançando no CSS

Qualquer dúvida estou por aqui, tá bom?

Grande abraço!